下载文档原格式
C#winform窗体⽤户控件⾃定义事件C#许多事情都和事件有关系，⼤部分的事情我们可以通过C#⾃⼰的事件来完成，但如果我们⾃⼰新建了⼀个⾃定义控件，我们该如何定义⾃⼰想要的事件呢？下⾯我就来为⼤家粗略的讲解⼀番。
假设我们⾃定义了⼀个控件，它的类名是MyControl，我们在test类（test也是⼀个窗体）中使⽤它，我们要在test中写⽅法，在MyControl中写事件，这该怎么做？如何在test中捕获Mycontrol中的事件，如何让事件绑定test中的⽅法？假设MyControl是⼀个组合控件，假设有⼀个按钮btn_Ok，它在组合控件System.Windows.Forms.ToolStrip中，假设这个容器叫toolstrip，当我们点击了之后需要响应⼀个事件，提⽰我们数据保存了，这个事件我们起个名字叫Btn_Ok_Clicked（当然也可以叫datasaved或者其它），下⾯要定义这个事件，我们这么定义：private static readonly object Event_Btn_Ok_Clicked = new object();public event EventHandler Btn_Ok_Clicked{add { base.Events.AddHandler(Event_Btn_Ok_Clicked , value); }remove { base.Events.RemoveHandler(Event_Btn_Ok_Clicked , value); }}然后我们需要定义⼀个⽅法，⽤来引发这个事件protected virtual void OnBtn_OK_Click(EventArgs e){EventHandler handler =base.Events[Event_Btn_Ok_Clicked ] as EventHandler;if (handler != null){handler(this, e);}}该⽅法定义完了之后，我们需要通过捕获原本的事件，然后引发该事件点击btn_Ok会引发toolstrip的click事件，我们在捕获click事件后对数据进⾏处理private void ToolStripItemClicked(object sender, ToolStripItemClickedEventArgs e){switch (){case "btn_Ok":OnBtn_OK_Click(e);break; } }以上⽅法定义在MyControl类中到这⾥，MyControls中的事件和⽅法就都定义和实现完了，下⾯我们来讲在test中如何对这个事件的引⽤。
Vue⾃定义事件前⾯的话 ⽗组件使⽤传递数据给⼦组件，⼦组件怎么跟⽗组件通信呢？这时，Vue的⾃定义事件就派上⽤场了。
本⽂将详细介绍Vue⾃定义事件事件绑定 每个 Vue 实例都实现了事件接⼝ (Events interface)，即使⽤ $on(eventName) 监听事件使⽤ $emit(eventName) 触发事件 [注意]Vue 的事件系统分离⾃浏览器的EventTarget API。
尽管它们的运⾏类似，但是$on和$emit不是addEventListener和dispatchEvent的别名 另外，⽗组件可以在使⽤⼦组件的地⽅直接⽤v-on来监听⼦组件触发的事件 [注意]不能⽤$on侦听⼦组件抛出的事件，⽽必须在模板⾥直接⽤v-on绑定<div id="example"><parent></parent></div><script>var childNode = {template: `<button @click="incrementCounter">{{ counter }}</button>`,data(){return {counter: 0}},methods:{incrementCounter(){this.counter ++;this.$emit('increment');}},}var parentNode = {template: `<div class="parent"><p>{{total}}</p><child @increment="incrementTotal"></child><child @increment="incrementTotal"></child></div>`,components: {'child': childNode},data(){return {'total':0}},methods:{incrementTotal(){this.total ++;}}};// 创建根实例new Vue({el: '#example',components: {'parent': parentNode}})</script>命名约定 ⾃定义事件的命名约定与及的命名约定都不相同，由于⾃定义事件实质上也是属于HTML的属性，所以其在HTML模板中，最好使⽤中划线形式<child @pass-data="getData"></child> ⽽⼦组件中触发事件时，同样使⽤中划线形式this.$emit('pass-data',this.childMsg)数据传递 ⼦组件通过$emit可以触发事件，第⼀个参数为要触发的事件，第⼆个事件为要传递的数据this.$emit('pass-data',this.childMsg) ⽗组件通过$on监听事件，事件处理函数的参数则为接收的数据getData(value){this.msg = value;}<div id="example"><parent></parent></div><script>var childNode = {template: `<div class="child"><div><span>⼦组件数据</span><input v-model="childMsg" @input="data"></div><p>{{childMsg}}</p></div>`,data(){return{childMsg:''}},methods:{data(){this.$emit('pass-data',this.childMsg)}}}var parentNode = {template: `<div class="parent"><div><span>⽗组件数据</span><input v-model="msg"></div><p>{{msg}}</p><child @pass-data="getData"></child></div>`,components: {'child': childNode},data(){return {'msg':'match'}},methods:{getData(value){this.msg = value;}}};// 创建根实例new Vue({el: '#example',components: {'parent': parentNode}})</script> 下⾯⽰例中，修改⼦组件中的input值，则⽗组件到接收到相同值，则显⽰出来sync修饰符 在⼀些情况下，可能会需要对⼀个 prop 进⾏双向绑定。
js中事件（⾃定义事件） 今天闲的蛋疼，我们来聊⼀聊web前端中的事件机制和⾃定义事件。
灵感来⾃jQuery，在此感谢jQuery作者。
⾸先，最开始。
<button id="button" type="button" onclick="alert('hello')">你好</button> 这是我们在使⽤html写页⾯的时候最原⽣的事件触发⽅式。
上⾯那⾏代码会⽣成⼀个按钮，当我们点击这个按钮的时候就会弹出⼀个原⽣的弹窗，内容是hello。
随着技术的发展，我们认为事件要和html结构分开，于是就演化出了这么⼀种写法。
<button id="button" type="button">你好</button><script>var button = document.getElementById("button");button.onclick = function(){ alert("hello");}</script> 以上代码的效果和第⼀个⼀样，但是实现了事件与html的分离。
和上⾯的代码采⽤⼀样的原理，可以为各种各样元素添加各种各样事件。
⽐如说keyup、mouseover等。
那我们对js最原⽣的事件有了⼀定的了解后，我们就会想，我们能不能⾃定义事件呢？⽐如说，我们希望在按⼀个按钮的时候触发⼀个save事件。
我们发现原⽣的js中没有save事件，怎么办，难道就这么放弃吗？ 于是我们就考虑了，事件的本质在于消息的传递。
那我们把save写成⼀个函数，当我们点击按钮的时候执⾏该函数，不就变相的实现了这个⾃定义事件吗？<button id="button" type="button">你好</button><script>var button = document.getElementById("button");button.onclick = function(){save();}var save = function(){alert("save");}</script> 是啊，实现是实现了，但我们就觉得这个⽅法好挫啊，⽽且我们如果想要为save定义多个事件，就会发现，后⼀个事件会覆盖前⼀个事件这就相当的蛋疼了。
