為什么封裝DOM0,DOM2,IE事件中,最后element指定btn3,但其他的如btn2也能彈出一樣的?
為什么封裝DOM0,DOM2,IE事件中,最后element指定btn3,但其他的如btn2也能彈出一樣的?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
? ? <div>
? ? <input type="button" value="HTML事件" id="btn" onclick="showMes()">
? ? <input type="button" value="DOM0事件" id="btn2">
? ? <input type="button" value="DOM2事件" id="btn3">
? ? <input type="button" value="IE事件" id="btn4">
? ? </div>
? ? <script type="text/javascript">
? ? //HTML事件,將觸發(fā)事件放在HTML里面。可以直接寫,也可以封裝。
? ? ? ? ? ? function showMes(){
? ? alert("hello world");
? ? }
? ? var d=document;
? ? var btn2=d.getElementById("btn2"),
? ? ? ? btn3=d.getElementById("btn3"),
? ? ? ? btn4=d.getElementById("btn4");
? ? //DOM0事件,在js里觸發(fā)事件,便于修改;當(dāng)觸發(fā)的事件=null為刪除該事件。
? ? /*btn2.onclick=function(){
? ? alert("這是通過DOM0級(jí)添加的事件");
? ? }
? ? btn2.onclick=null;*/ //null不加引號(hào)。刪除事件后,點(diǎn)擊按鈕將不再跳出彈框。
? ? //DOM2事件,處理事件addEventListener("其包括三個(gè)參數(shù),觸發(fā)、函數(shù)、false"),刪除事件removeEventLiatener("同樣包含三個(gè)參數(shù)")。
? ? ? ? //注意:DOM2的觸發(fā)事件不加“on”,且此方法不支持IE瀏覽器。
? ? ? ? /*btn3.addEventListener("click",showMes,false);
? ? ? ? btn3.removeEventListener("click",showMes,false);*/
? ? //IE事件
? ? ? ? ?//IE8以及更早瀏覽器只支持事件冒泡
? ? ? ? ?//添加事件attachEvent("其包含兩個(gè)參數(shù),觸發(fā)、函數(shù)(觸發(fā)需要加‘on’)"),刪除事件detachEvent("統(tǒng)一包含兩個(gè)參數(shù)")。
? ? ? ? ? ?//btn4.attachEvent("onclick",showMes);
? ? ? ? ? ?//btn4.detachEvent("onclick",showMes);
? ? ? ? //封裝一個(gè)DOM0,DOM2,IE事件,誰行誰用上。
? ? ? ? ? ? var eventutil={
? ? ? ? ? ? addhandler:function(element,type,handler){
? ? ? ? ? ? if(element=addEventListener){
? ? ? ? ? ? ? ? ? ? ? ?element=addEventListener(type,handler,false);
? ? ? ? ? ? }else if(element=attachEvent){
? ? ? ? ? ? ? ? ? ? ? ?element=attachEvent('on'+type,handler);
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ?element['on'+type]=handler;
? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? removehandler:function(element,type,handler){
? ? ? ? ? ? if(element=removeEventListener){
? ? ? ? ? ? ? ? ? ? ? ?element=removeEventListener(type,handler,false);
? ? ? ? ? ? }else if(element=detachEvent){
? ? ? ? ? ? ? ? ? ? ? ?element=detachEvent('on'+type,handler);
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ?element['on'+type]=handler;
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? eventutil.addhandler(btn3,'click',showMes);
? ? ? ? ? ? eventutil.removehandler(btn3,'click',showMes);
? ? </script>
</body>
</html>
2020-08-13
語法錯(cuò)誤啦兄弟。if判斷的地方以及后面有關(guān)于element 的地方都錯(cuò)了。比如if(element.addEventListener)你寫成了if(element=addEventListener),element.attachEvent 你寫成了element=attachEvent……