js 节点操作及事件

- 日理万妓 2022-08-10 11:54 190阅读 0赞

<span style="font-size:14px;"><div id="a1">
      this is a div block;
    </div>
    <script type="text/javascript">
       var a1=document.getElementById('a1');
       var element = document.createElement('button');
       var attr=document.createAttribute('id');
       attr.value='btn';
    
       element.setAttributeNode(attr);
       
       var textNode = document.createTextNode('Hello world!');
       element.appendChild(textNode);  
       
       a1.appendChild(element);
       
       
       
       
       var x=document.getElementById('btn');
       
       //x.οnclick=function(){alert('ddd');};
       //x.addEventListener('click',function(){
       //    alert('dddd');
       
       //});
       function fn(){
           alert('dd');
    	}
       addEvent(x,'click',fn,false);
      
       
       //用于给文档的element添加事件
       function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);//DOM2.0
    return true;
    }
    else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);//IE5+
    return r;
    }
    else {
    elm['on' + evType] = fn;//DOM 0
    }
    }
    </script></span>

事件委派：

<span style="font-size:14px;">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] = null;
    }
    }
    };</span>

IE事件对象也包含了创建事件的方法和属性，他们中的大部分都关联DOM的属性或方法。比如DOM事件对象，可用的方法和属性基于触发事件的类型而不同，但是所有的事件都有以下的方法和属性：

cancelBubble      设置为true，可以取消事件冒泡（和stopPropagation()一样）

returnValue         设置为false，取消默认的事件行为（和preventDefault()一样）

srcElement         事件的目标 （和DOM 的target一样）

type                     事件的类型

当页面刷新或要关闭页面前的提示对话框：

window.addEventListener('beforeunload', function(event){
    event = window.event || event;
    event.returnValue = 'I ’ m really going to miss you if you go.';
    });