关闭

关于事件的那些细节知识...

标签: 事件处理程序
1788人阅读 评论(1) 收藏 举报
分类:

关于事件的知识汇总


DOM0级事件处理程序


var btn = document.getElementById("btn");
//添加事件
btn.onclick = function () {
alert(this.id);  //使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此,这时候的的事件处理程序是在元素的作用域中完成的,换句话说,程序中的this引用当前元素
}


//移除事件
btn.onclick = null;


优点 :原因一是简单,二是具有跨浏览器的优势。


DOM2级件处理程序


定义的两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()    removeEventListener(),他们都接受三个参数:事件处理程序名称与事件处理程序函数和一个布尔值。最后一个布尔值如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序


var btn = document.getElementById("btn");
function handler() {
alert(this.id);//与DOM0级一样,这里添加的事件处理程序是在元素的作用域中运行
}


//添加事件
btn.addEventListener("click",handler,false);

//移除事件
btn.removeEventListener("click",handler,false);


优点:可以给一个元素添加多个事件处理程序,事件处理程序会以按照添加他们的顺序执行。 缺点: IE9 ,Firefox,Safari,Chrome,和 Opera 支持 DOM2 级事件处理程序


IE事件处理程序 , IE 实现了与DOM中类似的两个方法:attachEvent(), detachEvent(),这两个方法接收相同的两个参数:事件处理程序名称与事件处理程序函数,由于IE8及更早版本只支持事件冒泡,所以事件处理程序会被添加到冒泡阶段


var btn = document.getElementById("btn");
function handler() {
alert(this === window);//事件处理程序会发生在全局作用域中,因此this等于window.
}

//添加事件
btn.attachEvent("click",handler,false);

//移除事件
btn.detachEvent("click",handler,false);


优点:可以给一个元素添加多个事件处理程序,事件处理程序不是以按照添加他们的顺序执行,而是以相反的顺序触发。


本文由web前端精髓为



1
0

猜你在找
【直播】机器学习&深度学习系统实战(唐宇迪)
【直播】Kaggle 神器:XGBoost 从基础到实战(冒教授)
【直播回放】深度学习基础与TensorFlow实践(王琛)
【直播】计算机视觉原理及实战(屈教授)
【直播】机器学习之凸优化(马博士)
【直播】机器学习之矩阵(黄博士)
【直播】机器学习之概率与统计推断(冒教授)
【直播】机器学习之数学基础
【直播】TensorFlow实战进阶(智亮)
【直播】深度学习30天系统实训(唐宇迪)
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11808次
    • 积分:531
    • 等级:
    • 排名:千里之外
    • 原创:38篇
    • 转载:0篇
    • 译文:2篇
    • 评论:3条
    微信公众号
    微信名:Web前端精髓 / 微信号:css-js / GitHub
    文章分类