R语言 matlab 微信公众号开发 idea离线安装 微信小程序教程 ASP.NET webserver CPU pagination permissions vue实例 less使用 当前线程等待5秒 monkey安装 pcie高速固态硬盘 mysql或者条件 python正则匹配中文 python实例 pythonsocket编程 python程序 python服务器开发 java中的正则表达式 javapattern java时间戳转时间 java运行 pyh ram容量是什么意思 魔兽改图工具 js日期格式化 findall 视频加文字用什么软件 ansys安装教程 羽毛球拍握法 图片转pdf免费软件 vue定时器 掘地鼠炖肉 轮播图代码 layout软件 ansys安装 fla文件用什么打开
当前位置: 首页 > 学习教程  > 

原生JS事件绑定onclick和addEventListener

2020/10/16 18:02:59 文章标签: js原生点击事件

onclick绑定方式 优点: - 简洁 - 处理事件的this关键字指向当前元素 缺点: - 不能对事件捕获或事件冒泡进行控制,只能使用事件冒泡,无法切换成事件捕获 - 一次只能对一个元素绑定一个事件处理程序,当使用window.…

onclick绑定方式

优点:
- 简洁
- 处理事件的this关键字指向当前元素
缺点:
- 不能对事件捕获或事件冒泡进行控制,只能使用事件冒泡,无法切换成事件捕获
- 一次只能对一个元素绑定一个事件处理程序,当使用window.onload属性时,会覆盖采用相同方法所绑定的事件代码

this与event查一不大 推荐使用event对象 这样你总是可以拥有全部的可用信息

dd.onclick = function(event){
    console.log(event.target.innerHTML);//event.target指向的是dd元素,以及他的所有信息
    console.log(this.innerHTML);//this也是指向dd元素,包含他的可用信息
}

注意:有时也会有需要使用this的情况
当需要鼠标移入和移出的时候 event会触发该事件每一个子元素

dd.onmouseover = function(event) {
    this.style.backgroundColor = "red";//不会改变子元素
    event.target.style.backgroundColor = 'red';//会改变子元素
};
dd.onmouseout = function(event) {
    this.style.backgroundColor = "green"
    event.target.style.backgroundColor="green"
};

addEventListener绑定方式

优点:
- 可以支持事件处理的捕获阶段,也可以支持时间处理的冒泡阶段,两个阶段都是通过addEventListener最后一个参数设置为false(默认值,表示事件冒泡)或者true(表示事件捕获)来切换
- 事件处理 this与onclick一样
- 事件处理函数中,event对象总是作为第一个可用参数
- 你可以为某个元素绑定多个事件而不会覆盖之前绑定的处理程序 (按照顺序执行)
缺点:
- IE8以下不支持

dd.addEventListener('click',function(e){
    console.log(this.innerHTML);
    console.log( e.target.innerHTML );
});

解除事件绑定

对于onclick

dd.onclick = null;

对于addEventListener

function clickShow(){
    console.log( 'clickShow' );
}

function removeShow(){
    console.log( 'removeShow' );
    dd.removeEventListener('click',clickShow,false/true);
}
dd.addEventListener('click',clickShow,flase/true);//当第三个参数flase/true存在的时候 那么移除的时候也应该带有第三个参数,如果没有可以不带

cc.addEventListener('click',removeShow)

阻止事件冒泡e.stopPropagation();

dd.onclick = function(e){
    console.log(e.target.innerHTML);
    this.style.color = 'red';
    //阻止事件冒泡 
    //防止点击dd的时候隐藏了父级domClick
    e.stopPropagation();
}
domClick.addEventListener('click',function(e){
    this.style.visibility = 'hidden';
})

屏蔽浏览去的默认行为 e.preventDefult();return false;

参考书籍:《精通javascript》(第二版)第六章


本文链接: http://www.dtmao.cc/news_show_300335.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?