dom元素的获取、dom元素的事件、事件的冒泡、事件的委托、事件的参数

一、dom（document  object model）元素的获取

dom元素的获取方式一：

1.document.getElementsByClassName(“btn”)（获取到网页中的按钮）    获取到的是一个元素的集合

因为class可以绑定多个元素，所以获取出来的对象是集合类型。

在获取元素时注意，获取元素是否初始化。

2.获取单个元素：console.log(btn[0]);   。

2.获取到单个元素后要操作元素

innerHTML：指元素的html内容（即标签内部的东西）。

写法（1）btn[0].innerHTML="按钮"

写法（2）for(var i=0;i<btn.length;i++)

{

   btn[i].innerHTML="按钮"

}

dom元素的获取方式二：

document.getElementById(“btn”)     获取唯一元素

dom元素的获取方式三：

document.getElementsByName(“btn”)      通过元素的name名称获取       获取到的是一个节点的集合

dom元素的获取方式四：

document.getElementsByTagName(“btn”)       元素的名称

dom元素的获取方式五：

document.body.getElementsByTagName(“btn”)

二、dom元素的事件

它是一个被动的行为，

1.js中的事件分类

键盘事件：keydown按下、keyup弹起、keypress按下弹起。

鼠标事件：mousedown、mouseup、click单击、doubleclick双击、mouseenter鼠标进入、mouseleave（mouseout）鼠标离开、mouseover鼠标悬停、mousemove鼠标移动。

窗口事件：load（onload）加载、focus获焦事件、blur失焦事件。

移动端的事件（即触屏事件）：

注意：mouseout（鼠标垂直离开）    mouseleave（鼠标水平离开）

2.元素的基本事件该如何绑定

注意：在元素的行内之间绑定事件,调用方法使用。js的里面的事件前面都带on。

例：<button οnclick="alert(1)（可以写方法的调用名称或直接写js脚本）"></button>

alert:指js中的弹框、提示框。可以自动计算。

例：function btn() { alert(1) }

<button οnclick="btn()"></button>

3.怎样在脚本区域直接动态绑定事件

脚本写在元素之前需要考虑获取到元素是否存在。

获取className名称元素

4.给dom元素添加事件的监听（事件的委托）

注意：添加事件句柄时不带on。

移除事件的监听

注意：事件在页面初始化的时候，已经初始化完成，也就是说for已经执行完毕，i已经达到最大值，里面的i就是最大值。

removeEventListener 在移除的时候，addEventListener 里面的内部函数得改成外部函数。

this 在事件的回调函数里面指代的是当前事件的执行对象。

三、事件冒泡

常见的事件冒泡阻止方式：

（1）return false（在JQ中有用） 在原生js里面不能阻止事件的冒泡，能阻止事件的默认行为。

（2）event.stopPropagation(); 阻止事件的冒泡。

（3）event.preventDefault(); 阻止事件的默认行为。

补充：oncontextmenu可以禁止右键的默认行为。

四、事件的委托

事件的委托是为了优化代码的性能。

target.nodeName输出是大写LI，toLowerCase()转化为小写。

五、事件的参数

1.鼠标参数

注：解决兼容性问题，（e和event一样）。

var x=e.clientX || e.pageX;
var y=e.clientY || e.pageY;

2.键盘参数

注：e.key 当前输入的字符值。e.keycode字符的SCII值。charCodeAt() 将字符转化成SCII值。(String.fromCharCode(num)

将SCII值转化为字符。