JS DOM的事件及其用法

DOM事件的设定

1.<input  type=”text”  name=”username” onclick=”函数名称()” />

2.<input  type=”text”  name=”username” onclick=”过程代码var a=10;var b=20;alert(123);this[itnode]” />

3.itnode.onclick = function(){this[itnode]}

4.itnode.onclick = 有名函数名称;

    function 函数名称(){this[itnode]}

注：this代表本身节点

设置事件

itnode.addEventListener(事件类型，事件处理[，事件流]);

取消事件

itnode.removeEventListener(事件类型，事件处理[，事件流]);

注：事件流可以写也可以不写，事件流的值是true或false，true捕捉型、[false冒泡型]

dom2级事件设置的特点：

1.可以为同一个对象设置多个同类型事件。

例：dd.addEventListener（“movseover”，f1）

　　dd.addEventListener（“movseover”，f2）

　　dd.addEventListener（“movseover”，f3）

2. 事件取消也非常灵活。

3.对事件流也有很好的处理。

事件对象

获取事件

node.onclick = function(evt){evt就是事件对象}

获取坐标

    event.clientX/clientY;    //相对dom区域坐标

    event.pageX/pageY;        //相对dom区域坐标，给考虑滚动条位置

    event.screenX/screenY;    //相对屏幕坐标

阻止事件

　　event.stopPropagation();  //主流浏览器

获取键盘事件

　　event.keyCode  获得键盘对应的键值码信息

 附：编程常犯错误

1.DOM调用方法的时候方法名后注意加（）

2.获取元素时，要注意获取的是表单元素还是非表单元素

3.当获取select中的option注意用数组的方式获取

4.+为字符串转数字，用时注意与运算符用空格分离