JS-事件

问答题

1.dom对象的innerText和innerHTML有什么区别？

• innerText:获取到当前节点的文本内容不包括标签
• innerHTML:返回元素的html结构，包括标签

2.elem.children和elem.childNodes的区别？

• elem.children:获取html的子节点,返回一个HTMLCollection集合。
• elem.childNodes:获取所有子节点,返回一个NodeList集合,除了HTML元素节点，该属性返回的还包括Text节点和Comment节点。

3. 查询元素有几种常见的方法？

1. getElementById():返回匹配指定ID属性的元素节点.如果没有发现匹配的节点，则返回null.这也是获取一个元素最快的方法;
2. getElementsByClassName():返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中.这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用;
3. getElementsByTagName():返回所有指定标签的元素（搜索范围包括本身）.返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中.这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用;
4. getElementsByName():用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化;
5. querySelector():返回匹配指定的CSS选择器的元素节点.如果有多个节点满足匹配条件，则返回第一个匹配的节点.如果没有发现匹配的节点，则返回null;
6. querySelectorAll():返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象.NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中;

4. 如何创建一个元素？如何给元素设置属性？

用createElement方法用来生成HTML元素节点.
var newDiv = document.createElement(“div”);
用setAttribute()方法设置元素属性.

var node = document.getElementById(“div1”);
node.setAttribute(“my_attrib”, “newVal”);

5. 元素的添加、删除？

1.在元素末尾添加元素:appendChild()

var newDiv = document.createElement(“div”);
var newContent = document.createTextNode(“Hello”);
newDiv.appendChild(newContent);

2.在某个元素之前插入元素:insertBefore()

var newDiv = document.createElement(“div”);
var newContent = document.createTextNode(“Hello”);
newDiv.insertBefore(newContent, newDiv.firstChild);

3.替换元素:replaceChild()

newDiv.replaceChild(newElement, oldElement);

4.删除元素:removeChild()

parentNode.removeChild(childNode);

6. DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

DOM0
DOM0事件就是通过onclick写在HTML标签里的事件

<a href="#" onclick="console.log('clicked');">点我</a>

这种写法的缺点是不利于日后维护，代码只能使用一次，没有复用性。

DOM2
DOM2事件有两种方法一个是addEventListener()和removeEventListener() 它们都返回三个参数分别是事件类型、事件处理方法和布尔值默认为false，false是冒泡阶段处理，如果是ture就是在调用阶段处理。

<input id='btn' type="button" name="name" value="点我啊" />
<script>
  var btn = document.querySelector("#btn")
  btn.addEventListener("click",function(){
      console.log("北京欢迎你")
  },false)
</script>

7. attachEvent与addEventListener的区别？

• 适用的浏览器不同：
  addEventListener适用于现代浏览器
  attachEvent是低版本IE浏览器的私有方法
• 参数和触发阶段不同:
  addEventListener有三个参数，最后一个参数可以定义处理程序在捕获/冒泡阶段触发
  attachEvent只有两个传递参数，只能在冒泡阶段触发
• 第一个参数的形式不同：
  addEventListener的第一个参数是click
  而attachEvent的第一个参数是onclick
• this不同:
  addEventListener中的this是触发事件的元素
  attachEvent的this指代的是window
• 在同一个事件上绑定多个事件处理程序时的执行顺序不同 addEventListener会按添加顺序并按照第三个参数执行
  而 attachEvent 的执行是无序的

8. 解释IE事件冒泡和DOM2事件传播机制？

• IE事件冒泡是事件由第一个被触发的元素接收，然后逐级向上传播.
• DOM2事件传播，事件由最外层元素接收，然后逐层向内传播，这个过程为捕获阶段，当达到目标元素时，处于目标阶段，然后事件由目标元素向最外层开始传递，这个过程称之为冒泡阶段.

9. 如何阻止事件冒泡？ 如何阻止默认事件？

• e.stopPropagation();阻止事件冒泡,ie中则用cancelBubble()
• e.preventDefault();阻止默认事件,ie中需要把returnValue设为 false