9月13日事件2

1.事件绑定的方式

a.通过HTML元素

进行绑定。（即

’）

b.通过js的方式

进行绑定，即：obj.onclick = function(){}

c.事件监听

addEventListener()

事件监听的好处

1—可以为同样的元素绑定多次同一个事件

2—程序员可以使用事件监听的方式 确定触发的过程是冒泡还是捕获

事件监听的语法：

事件源.addEventListener(“去掉on的事件”,function(){},【事件捕获还是冒泡，true/false) 默认是false 冒泡】

【注】：当相同的元素绑定相同的事件，且捕获和冒泡同时存在时，捕获优先于冒泡

2.事件绑定的取消

1.再给事件赋空值

 document.onclick = function(){
	 	alert(1);
	 }
	 document.onclick = null;

2.removeEventListener（）用这个取消事件监听的绑定

var fun = function(){
		alert(1);
	}
	document.addEventListener("click",fun);
	//注意事项:两个方法的回调函数必须是同一个函数对象才可以取消
	document.removeEventListener("click",fun);

3.事件委托：

1.定义：

委托:让别人取做你应该做的事； 依赖于冒泡机制

2.好处

1:可以通过委托机制批量为子元素添加事件，提高运行效率

核心:获取真实操作源素

​ var target = e.srcElement || e.target;

​ 获取真实操作源的标签名(都是大写)

​ console.log(target.tagName);

target.tagName == “LI”【注：后面的标签名必须大写】

2.可以为未来创建的元素,提前通过父元素绑定事件

4.json对象的和字符串的相互转换

JSON对象和字符串的相互转换

ES6提供的两个函数

1.字符串->json对象 JSON.parse

 var str = '{"name":"老王","age":18}';

var json = JSON.parse(str);

 console.log(json.name,json.age);

2.json对象->字符串 JSON.stringify

var* json = {"name":"老王","age":18};

  *var* str = JSON.stringify(json);

  console.log(typeof str);

5.拖拽效果

拖拽思路： onmousedown onmousemove onmouseup

1.首先为需要拖拽的对象添加一个onmousedown事件

记录：鼠标点击某个对象时的内部偏移量

e.offsetX e.offsetY

2.鼠标在文档上移动

要想让操作的元素动起来，该元素必须有定位

移动的过程，实际上改变，元素的left和top

3.停止移动，需要触发onmouseup鼠标抬起时，取消移动

document.onmousemove = null;