JS事件挂接(详细)
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
最近学习了JS挂接事件,根据自己对JS挂接事件的了解,以及自己的实际操作。对相关知识进行了如下总结,希望可以帮到大家。
1、事件挂接的第一种方式:
例://不传递参数
function testBtn1(){
alert(1);
alert(this);//this指的是window
}
//传递参数
function testBtn1(num){
alert(num);//num=100
}
//同时挂接多个事件
function funcTest1(){
alert(1);
}
function func(){
alert(2);
}
(1)这种方式限于单个页面上的单个事件;
(2)在使用该方法进行事件挂接时,可以传递参数;
(3)触发该事件的对象是window对象。
(4)使用上述方法挂接事件时,可以同时挂接多个事件,同一个事件可以被不同的对象挂接。
2、事件挂接的第二种方式:
例://不传递参数
var btn2=document.getElementById("btn2");
btn2.setAttribute("onclick","testBtn2()");
function testBtn2(){
alert(3);
alert(this);//this指的是window
}
//传递参数
btn2.setAttribute("onclick","testBtn2(100)");
function testBtn2(num){
alert(num);//num=100
}
//同时挂接多个事件
var bid1=document.getElementById("btn3");
bid1.setAttribute("onclick","funcTest2(),func()");
function testBtn2(){
alert(3);
}
function func(){
alert(2);
}
(1)这种方式使用setAttribute()方法挂接事件,第一个参数必须写为onclick这种形式的,第二个参数为函数名,是字符串形式的;
(2)该方法同第一个方法一样,可以传递参数;
(3)触发该事件的对象是window对象;
(4)使用上述方式挂接事件时,可以同时挂接多个事件,一个事件也可以由多个对象挂接。
3、事件挂接的第三种方式:
例:
var btn3=document.getElementById("btn3");
btn3.addEventListener("click",testBtn3);
btn3.addEventListener("click",testBtn2);
btn3.attachEvent("onclick",testBtn2);
function testBtn2(){
alert(3);
}
function testBtn3(){
alert(this);//this指的是按钮
}
(1)这种方式使用addEventListener()方法来挂接事件,第一个参数为click,第二个参数为函数名;
(2)函数名后边不可以加括号,加上括号就会立即调用该函数;
(3)触发该事件的对象是按钮元素;
(4)该方法不可以传递参数,只要添加参数,就会调用该函数;
(5)通过多次调用addEventListener()方法可以挂接多个事件,后挂接的事件不会覆盖先前挂接的事件,所有的挂接事件都可以执行。
(6)这种方式是推荐使用的方式,值得注意的是:该方式在老版本的IE中不支持。
(7)attachEvent与addEventListener()方法类似,但是该方法只有IE高版本浏览器支持,其他几个浏览器都不支持,兼容性不好,不推荐使用。
4、事件挂接的第四种方式:
例:
var btn4=document.getElementById("btn4");
btn4.onclick=testBtn4;
btn4.onclick=testBtn3;
function testBtn4(){
alert(this);//this指的是按钮
}
function testBtn3(){
alert(123);
}
(1)这种方式使用.onclick属性来挂接事件,格式如下所示:
btn4.onclick=testBtn4;
(2)该方式不能直接传递参数,函数名后边也不可以添加括号和参数,否则就会直接调用该函数。
(3)使用.onclick属性不可以直接挂接多个事件;
(4)多次使用.onclick属性挂接不同的事件时,后挂接的事件会将先挂接的事件覆盖,只执行后挂接的事件;
(5)触发该事件的对象是按钮元素;
以上就是我们在js中常见的挂接函数的四种方式,推荐使用的是第三种方式,这是自己实验之后总结的,如果大家觉得有什么不足的地方,欢迎指出并补充,当然也希望自己的总结可以帮助到大家。