绑定事件及解绑事件

注意:用什么方式绑定的,就必须用什么方式解绑;
 //为按钮取消点击事件,方式1
my$("btn").οnclick=function () {
    console.log("诱惑");
}
my$("btn2").οnclick=function () {
    my$("btn").οnclick=null;
}
//为按钮解绑方式2----适合火狐和谷歌以及IE11,不适合IE8
 function f1() {//绑定事件
     console.log("第一个");
 }
 function f2() {
     console.log("第二个");
 }
my$("btn").addEventListener("click",f1,false);
 my$("btn").addEventListener("click",f2,false);
my$("btn2").οnclick=function () {
    my$("btn").removeEventListener("click",f2,false);//解绑方法
}
//IE8专用绑定及解绑方式
function f1() {
    console.log("第一个");
}
function f2() {
    console.log("第一个");
}
my$("btn").attachEvent("onclick",f1);
my$("btn").attachEvent("onclick",f2);
my$("btn2").οnclick=function () {
    my$("btn").detachEvent("onclick",f2);
}
//绑定事件的兼容代码
function addEventListener(element,type,fn){
    if(element.addEventListener()){
        element.addEventListener(type,fn,false);
    }if(element.attachEvent){
        element.attachEvent(type,fn);
    }else{
        element["on"+type]=fn;
    }
}
//解绑事件的兼容代码
function removeEventListener(element,type,fnName){
    if(element.removeEventListener()){
        element.removeEventListener(type,fnName,false);
    }if(element.detachEvent){
        element.detachEvent(type,fnName);
    }else{
        element["on"+type]=null;
    }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 的组件是一个自包含的模块,它可以通过自定义事件来实现组件之间的通信。在 Vue 中,可以通过 `$emit` 方法触发自定义事件,使用 `$on` 方法监听自定义事件。 以下是一个示例代码: ```vue <template> <div> <button @click="emitEvent">触发自定义事件</button> </div> </template> <script> export default { methods: { emitEvent() { this.$emit('custom-event', 'custom-data') } } } </script> ``` 在父组件中,可以使用 `$on` 方法来监听自定义事件: ```vue <template> <div> <child-component @custom-event="handleCustomEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, methods: { handleCustomEvent(data) { console.log('接收到自定义事件', data) } } } </script> ``` 如果需要在组件销毁时解绑自定义事件监听器,可以使用 `$off` 方法,例如: ```vue <template> <div> <button @click="bindEvent">绑定自定义事件</button> <button @click="unbindEvent">解绑自定义事件</button> </div> </template> <script> export default { methods: { bindEvent() { this.$on('custom-event', this.handleCustomEvent) }, unbindEvent() { this.$off('custom-event', this.handleCustomEvent) }, handleCustomEvent(data) { console.log('接收到自定义事件', data) } } } </script> ``` 需要注意的是,在解绑自定义事件时,需要传入事件名称和事件处理函数。如果不传入事件处理函数,则会将该事件名称下的所有事件处理函数都解绑。此外,当组件销毁时,所有自定义事件监听器都会自动解绑,无需手动调用 `$off` 方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值