慕课前端入门-JS事件

1. 概念

事件是可以被JavaScript侦测到的行为，通俗的讲就是当用户与web页面进行某些交互时，解释器就会创建响应的event对象以描述事件信息。
如用户输入用户名和密码，点击登录。浏览器就向服务器发送登录请求。
常见的事件有：

  • 用户点击页面上的内容
  • 鼠标经过特定的元素
  • 用户按下键盘的某个按键
  • 用户滚动窗口或改变窗口大小
  • 页面元素加载完成或加载失败

事件句柄(事件处理函数、事件监听函数)：指用于响应某个事件而调用的函数。每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄。则在事件发生时，浏览器便执行指定的函数或语句。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<button id="clickme">点击我</button>
</body>
</html>
<script type="text/javascript">
	var btn = document.getElementById("clickme");
	var clickme = function () {
		alert("我被点击了");
	}
	function click2() {
		alert("我再次被点击了");
	}
	//句柄指定匿名函数
	btn.addEventListener('click',function(){alert("什么事")}, false);//第3个参数默认false
	//句柄指定变量
	btn.addEventListener('click', clickme);
	//句柄指定方法名
	btn.addEventListener('click',click2);
      btn.removeEventListener('click',clickme);
</script>

2. 事件定义

事件有三要素：事件对象、事件类型、事件句柄。
为特定事件定义监听函数有三种方式

2.1 直接在html中定义元素的事件相关属性

<button onclick="alert('hello')">按钮</button>
<body onclick="init()"></body>

缺点：违反了内容与行为相分离的原则，应尽可能少用
示例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<!-- 以下面代码为例，button是事件对象，onclick是事件类型，alert是事件句柄 -->
<button onclick="alert('给你说了，不要点')">不要点</button>
<button onclick="noClick()">不要点</button>
</body>
</html>
<script type="text/javascript">
	function noClick(){
		alert("点什么点，啥都没有");
	}
</script>

2.2 DOM0级事件

在JavaScript中为元素的事件相关属性赋值

document.getElementById("btn").onclick=function(){}
document.body.onload=init;
function init(){...}

缺点：此语法实现了“内容与行为相分离”，但元素仍只能绑定一个监听函数。
示例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<button id="clickme">点击我</button>
</body>
</html>
<script type="text/javascript">
	var btn = document.getElementById("clickme");
	var clickme = function () {
		alert("DOM0级事件绑定方式");
	}
	btn.onclick= clickme;
</script>

2.3 DOM2级事件

高级处理方式，一个事件可以绑定多个监听函数。但要注意浏览器兼容问题

方法说明示例
addEventListener 功能：用于向指定元素添加事件句柄
语法：element.addEventListener(event, function, useCapture);
参数：
  1. event：必须，事件类型
  2. function：必须，事件句柄，即函数
  3. useCapture：可选，布尔值 指定事件是否在捕获或冒泡阶段执行，默认false。
适用：chrome, firefox,IE9...		btn.addEventListener("click", function(){}, false); //DOM

btn.attachEvent("onclick", function(){}); //IE

document.body.addEventListener("load", init); //DOM

document.bbody.attachEvent("onalod", init);//IE

function init(){...}
removeEventListener 功能：移除指定的句柄
语法：element.removeEventListener(event, function, useCapture)
参数
  1. event：事件类型
  2. function：必须，指定要移除的函数名
  3. useCaption：可选，布尔值，指定移除事件句柄的阶段。
适用：chrome, firefox,IE9...
attachEvent 功能：添加事件
语法：element.attachEvent(event, function)
参数:
  1. event:必须，指定事件名，必须加on前缀
  2. function：必须，指定要事件触发时执行的函数
适用：IE8及以下
detachEvent 功能：移除事件
element.detachEvent(event, function)
参数：
  1. event：必须，要移除的事件名称，要加on前缀
  2. function：必须，指定要移除的函数
适用：IE8及以下

示例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<button id="dom">dom类型</button>
<button id="ie">IE浏览器</button>
</body>
</html>
<script type="text/javascript">
	var btn_dom= document.getElementById("dom");
	var btn_ie = document.getElementById("ie");
	btn_dom.addEventListener("click",function(){sayName("chrome")});
	btn_dom.addEventListener("click",sayHello);
	btn_dom.removeEventListener("click", sayHello);
	btn_ie.attachEvent('onclick',function(){sayName("IE")});
	btn_ie.attachEvent('onclick',sayHello);
	btn_ie.detachEvent('onclick', sayHello);

	function sayName(name){
		alert("我是"+name);
	}
	function sayHello(){
		alert("hello");
	}
</script>

2.4 封装一套代码兼容所有浏览器

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<button id="mybtn">惦记我</button>
</body>
</html>
<script type="text/javascript">
	var EventUtil= {
		addHandle: function(element, type, handle){
			if(element.addEventListener){
				element.addEventListener(type, handle, false);
			}else if(element.attachEvent){
				element.attachEvent("on"+type, handle);
			}else{
				element["on"+type]=null;
			}
		},
		removeHandler: function(element, type, handle){
			if(element.removeEventListener){
				element.removeEventListener(type, handle, false);
			}else if(element.detachEvent){
				element.detachEvent("on"+type, handle);
			}else{
				element["on"+type]=null;
			}
		}
	}
	var btn = document.getElementById("mybtn");
	var handle = function(){
		alert("被击中了");
	}
	EventUtil.addHandle(btn,"click",handle);
	EventUtil.removeHandler(btn,'click',handle);
</script>

2.5 总结：

方法区别
html中定义html中写js代码。
缺点：强耦合，不利于代码复用
DOM0级事件事件对象的属性添加绑定事件
优点：松耦合。html与js代码分离。
缺点：有且只能绑定一个事件
DOM2级事件通过addEventListener函数绑定事件
优点：松耦合
        支持同一DOM元素注册多个同类型事件
        新增了捕获和冒泡的概念
// IE中this只系那个window
elment.attachEvent("onclick", function(){
      alert(this === window);
})

3. 事件冒泡、事件捕获、事件委托

3.1 事件冒泡(顺序是从下往上)

事件冒泡：直系亲属书结构中，点击某个元素，由于冒泡作用，亲属树上的元素凡是添加点击事件的，都会被触发。子元素不会。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="parent">
	<div id="child" class="child">儿子
		<div id="grandChild">孙子</div>
	</div>
</div>
</body>
</html>
<script type="text/javascript">
	//事件冒泡
	document.getElementById('parent').addEventListener("click", function(){
		alert("parent事件被处罚，"+this.id);;
	},false);
	document.getElementById('child').addEventListener("click", function(){
		alert("child事件被触发，"+this.id);
	},false);
	document.getElementById('grandChild').addEventListener("click", function(){
		alert("child事件被触发，"+this.id);
	},false);
</script>

3.2 事件捕获(顺序是从上往下)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="parent">
	<div id="child" class="child">儿子
		<div id="grandChild">孙子</div>
	</div>
</div>
</body>
</html>
<script type="text/javascript">
	//事件冒泡
	document.getElementById('parent').addEventListener("click", function(){
		alert("parent事件被处罚，"+this.id);;
	},true);
	document.getElementById('child').addEventListener("click", function(){
		alert("child事件被触发，"+this.id);
	},true);
	document.getElementById('grandChild').addEventListener("click", function(){
		alert("child事件被触发，"+this.id);
	},true);
</script>

3.3 事件委托(委托给爸爸处理)

原理就是事件冒泡

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<ul id="ul">
	<li id="one">item1</li>
	<li id="two">item2</li>
	<li id="three">item3</li>
	<li id="four">item4</li>
	<li id="five">item5</li>
	<li id="six">item6</li>
</ul>
</body>
</html>
<script type="text/javascript">
	var ul = document.getElementById("ul");
	ul.addEventListener("click", function(event){
		switch(event.target.id){
			case "one":
				alert(1);
				break;
			case "two":
				alert(2);
				break;
			case "three":
				alert(3);
				break;
			case "four":
				alert(4);
				break;
			case "five":
				alert(5);
				break;
			case "six":
				alert(6);
				break;
		}
	}, false);
</script>

4. event对象常用属性和方法

4.1 type：事件类型

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<button id="btn">点击我</button>
</body>
</html>
<script type="text/javascript">
	var mybtn = document.getElementById("btn");
	// type：告诉我们现在的事件类型是什么
	var eventFun = function(event){
		if(event.type == "click"){
			alert("click事件被触发");
		}else if(event.type == "mouseout"){
			alert("mouseout事件被触发");
		}
	}
	mybtn.addEventListener("click",eventFun);
	mybtn.addEventListener("mouseout",eventFun);
</script>

4.2 target和currentTarget

target：当前点击的对象
currentTarget：事件绑定在谁身上，就指向谁

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="parent">他爹
	<div id="child">儿子</div>
</div>
</body>
</html>
<script type="text/javascript">
	var mybtn = document.getElementById("parent");
	mybtn.addEventListener("click", function(event) {
		console.log(event.target);
		console.log(event.currentTarget);
	});
</script>

4.3 preventDefault：阻止默认行为

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<a href="http://www.baidu.com" id="baidu">百度一下</a>
</body>
</html>
<script type="text/javascript">
	var mybtn = document.getElementById("baidu");
	mybtn.addEventListener("click", function(event) {
		event.preventDefault(); //页面将不再跳转
	});
</script>

4.4 stopPropagation取消事件捕获活着冒泡

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="parent">
	<dic id="child">点击我</dic>
</div>
</body>
</html>
<script type="text/javascript">
	var child = document.getElementById("child");
	var parent = document.getElementById("parent");
	parent.addEventListener("click", function(){
		alert("parent");
	})
	child.addEventListener("click", function() {
		alert("child");
		event.stopPropagation();//阻止冒泡，父类不再执行
	});
</script>

4.5 client、page、screen、offset

clientY:就是值浏览器顶部底边到鼠标位置，不计算滚动轴距离
pageY：就是指浏览器顶部底边到鼠标位置，但是它计算滚动轴的距离
screenY：屏幕顶部到鼠标位置
offset：当事件发生的时候，鼠标相对于事件源元素左上角的位置

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div{height: 200px;background-color: lightblue;}
		#gaodu{height: 2000px;background-color: lightgreen;}
	</style>
</head>
<body>
<div></div>
<div id="gaodu"></div>
</body>
</html>
<script type="text/javascript">
	var gaodu = document.getElementById("gaodu");
	gaodu.addEventListener("click", function(event){
		console.log("clientY:"+event.clientY+"; pageY:"+event.pageY+";screenY:"+event.screenY);
	})
</script>

4.6 IE8及以下浏览器对象属性于方法

  • type:获取事件类型，一样
  • returnValue=false：阻止浏览器默认行为，同preventDefault
  • cancelBubble=true：取消事件冒泡，同stopPropagation
  • src.element：同target
<!DOCTYPE html>
<html>
<head>
	<title>IE8及以下浏览器对象属性与方法</title>
	<style type="text/css">
	</style>
</head>
<body>
<button id="mybtn"></button>
<a id="baidu" href="http://www.baidu.com">百度一下</a>
<div id="parent"><div id="child">儿子</div></div>
<button id="target">target</button>
</body>
</html>
<script type="text/javascript">
var mybtn = document.geElementById("mybtn");
mybtn.attachEvent("onclick", function(event){
	//事件类型
	alert(event.type);//click
});

var baidu = document.geElementById("baidu");
baidu.attachEvent("onclick", function(event){
	//阻止浏览器默认行为
	event.returnValue = false;
});

var parent = document.geElementById("parent");
parent.attachEvent("onclick", function(event){
	alert("parent被触发了");
});
var child = document.geElementById("child");
child.attachEvent("onclick", function(event){
	alert("child被触发了");
	//取消冒泡行为
	event.cancelBubble=true;
});

var target = document.geElementById("target");
target.attachEvent("onclick",function(event){
	console.log(event.srcElement);
});
</script>

4.7 event跨浏览器兼容

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="parent">
	<div id="child">点击我</div>
</div>
<a href="http://www.baidu.com" id="baidu">百度一下</a>
</body>
</html>
<script type="text/javascript">
var EventUtil ={
	addHandle: function(element, type, handle){
		if(element.addEventListener){
			element.addEventListener(type, handle, false);
		}else if(element.attachEvent){
			element.attachEvent("on"+type, handle);
		}else{
			element["on"+type]=null;
		}
	},
	removeHandler: function(element, type, handle){
		if(element.removeEventListener){
			element.removeEventListener(type, handle, false);
		}else if(element.detachEvent){
			element.detachEvent("on"+type, handle);
		}else{
			element["on"+type]=null;
		}
	},
	getTarget: function(event){
		return event.target|| event.srcElement;
	},
	preventDefault:function(event){
		if(event.preventDefault){
			event.preventDefault();
		}else{
			event.returnValue = false;
		}
	},
	stopPropagation: function(event){
		if(event.stopPropagation){
			event.stopPropagation();
		}else{
			event.cancelBubble=true;
		}
	}
}
var parent = document.getElementById("parent");
EventUtil.addHandle(parent, "click", function(event){
	alert("parent被触发了");
});
var child = document.getElementById("child");
EventUtil.addHandle(child, "click", function(event){
	alert("child被触发了");
	var target = EventUtil.getTarget(event);
	console.log(target);
	EventUtil.stopPropagation(event);
})
var baidu = document.getElementById("baidu");
EventUtil.addHandle(baidu, "click", function(event){
	EventUtil.preventDefault(event);
});
</script>

5. 事件类型

5.1 常用事件




事件类型说明示例
UI事件
load当页面完全加载后在window上面触发
//UI事件
//1.当页面完全加载后在window上面触发
EventUtil.addHandler(window, "load", function(e){
	alert("Loaded");
});

//img标签加载完毕

var imgage = document.getElementsByTagName("img")[0];

EventUtil.addHandler(imgage, "load", function(e){

// e = EventUtil.getEvent(e);

console.log(EventUtil.getTarget(e).src);

});

imgage.src="http://pic.sc.chinaz.com/files/pic/pic9/201708/zzpic5953.jpg";


//图片预加载：提前把图片存到内存中

var image = new Image();//把图片存到内存中，需要时就从内存中取出来

EventUtil.addHandler(image, "load", function(){

alert("image loaded");

});

image.src="http://pic.sc.chinaz.com/files/pic/pic9/202004/zzpic24194.jpg";


//js动态加载

var new_script = document.createElement("script");

EventUtil.addHandler(new_script, "load", function(event){

alert("js loaded");

});

new_script.src="jquery.js";

document.body.appendChild(new_script);


//js动态添加CSS

var new_css = document.createElement("link");

new_css.type="text/css";

new_css.rel="stylesheet";

EventUtil.addHandler(new_css, "load", function(event){

alert("css loaded");

});

new_css.href = "index.css";

document.getElementsByTagName("head")[0].appendChild(new_css);
unload用户从一个页面切换到另一个页面
EventUtil.addhander(window, "unload", function(event){

alert("unloaded");

});
resize窗口大小发生变化时触发


//resize事件

EventUtil.addHandler(window, "resize", function(){

alert("resize");

});
scroll页面滚动


EventUtil.addHandler(window, "scroll", function(event){

alert("滚");

});
焦点事件
focus获得焦点，不支持冒泡
html代码
<div id="article">
	<input type="text" id="comment">
</div>
js代码
//input标签获得焦点，父元素不会执行，即不支持冒泡
var article = document.getElementById("article");
EventUtil.addHandler(article, "focus", function(event){
	console.log("父元素获得焦点被触发");
});
EventUtil.addHandler(article, "blur", function(event){
	console.log("父元素失去焦点被触发");
});
var comment = document.getElementById("comment");
EventUtil.addHandler(comment, "focus", function(event){
	console.log("获得焦点时被触发");
});
EventUtil.addHandler(comment, "blur", function(event){
	console.log("失去焦点时被触发");
});
blur失去焦点
focusin同focus，但支持冒泡
var article = document.getElementById("article");
EventUtil.addHandler(article, "focusin", function(event){
	console.log("父元素获得焦点被触发");
});
EventUtil.addHandler(article, "focusout", function(event){
	console.log("父元素失去焦点被触发");
});
var comment = document.getElementById("comment");
EventUtil.addHandler(comment, "focusin", function(event){
	console.log("获得焦点时被触发");
});
EventUtil.addHandler(comment, "focusout", function(event){
	console.log("失去焦点时被触发");
});
focusout同blur，但支持冒泡
DOMFocusIn同focusIn
var article = document.getElementById("article");
EventUtil.addHandler(article, "DOMFocusIn", function(event){
	console.log("父元素获得焦点被触发");
});
EventUtil.addHandler(article, "DOMFocusOut", function(event){
	console.log("父元素失去焦点被触发");
});
var comment = document.getElementById("comment");
EventUtil.addHandler(comment, "DOMFocusIn", function(event){
	console.log("获得焦点时被触发");
});
EventUtil.addHandler(comment, "DOMFocusOut", function(event){
	console.log("失去焦点时被触发");
});
DOMFocusOut同focusOut
鼠标事件
click单击
var parent = document.getElementById("parent");
EventUtil.addHandler(parent, "dbclick", function(event){
	console.log("单击事件");
});
dbclick双击
//未生效
var child = document.getElementById("child");
EventUtil.addHandler(child, "dbclick", function(event){
	console.log("双击事件");
});
mousedown鼠标按下
var parent = document.getElementById("parent");
EventUtil.addHandler(parent, "mousedown", function(event){
	console.log("鼠标按下");
});
EventUtil.addHandler(parent, "mouseup", function(event){
	console.log("鼠标松开");
});
EventUtil.addHandler(parent, "mousemove", function(event){
	console.log("鼠标移动");
});
mouseup鼠标松开
mousemove在目标元素上移动
mouseover鼠标移入
//html
<div id="parent" style="width: 200px;height: 100px;
background-color: lightgreen;">
	<div id="child" style="width: 50px;height: 50px;
		background-color: lightblue;position: relative;
		top: 25px;left: 50px;">点击我</div>
</div>
//从目标元素进入子元素也会执行
var parent = document.getElementById("parent");
EventUtil.addHandler(parent, "mouseover", function(event){
	console.log("鼠标移入");
});
EventUtil.addHandler(parent, "mouseout", function(event){
	console.log("鼠标移出");
});
mouseout鼠标移出
mouseenter进入元素
//进入目标元素的子元素，不会执行
var parent = document.getElementById("parent");
EventUtil.addHandler(parent, "mouseenter", function(event){
	console.log("鼠标移入");
});
EventUtil.addHandler(parent, "mouseleave", function(event){
	console.log("鼠标移出");
});
mouseleave离开元素

5.2 获取点击时辅助键

var parent = document.getElementById("parent");
EventUtil.addHandler(parent, "click", function(){
	var keys = new Array();
	if(event.shiftKey){
		keys.push("shift");
	}
	if(event.ctrlKey){
		keys.push("ctrl");
	}
	if(event.altKey){
		keys.push("alt");
	}
	if(event.metaKey){
		keys.push("meta");
	}
	alert("keys:"+keys.join(","));
});

5.3 获取key属性

var parent = document.getElementById("parent");
EventUtil.addHandler(parent, "mousedown", function(event){
	console.log(event.button);
});

高级浏览器：0-鼠标左键 1-鼠标滚轮 2-鼠标右键
IE8及以下：0-没有按下按钮 1-主鼠标按钮 2-次鼠标按钮 3-同时按下主次鼠标按钮 4-鼠标滚轮

5.4 键盘事件

keyCode：获取键码
charCode：获取ASCII码
data：获取输入的值

//按下某键时候触发，支持keyCode
var input_text = document.getElementById("comment");
EventUtil.addHandler(input_text, "keydown", function(event){
	console.log("keydown  keyCode："+event.keyCode);
});
//释放某键时候触发，支持keyCode
EventUtil.addHandler(input_text, "keyup", function(event){
	console.log("keyup keyCode："+event.keyCode);
});
//字符键触发，keyCode不稳定，用charCode
EventUtil.addHandler(input_text, "keypress", function(event){
	console.log("keypress keyCode："+event.keyCode);
	console.log("keypress  charCode："+event.charCode);
});
EventUtil.addHandler(input_text, "textInput", function(event){
	console.log("输入的内容:"+event.data);
});

封装获取字符码的函数

	//仅适用于keypress，其他如keydown,keyup不用
	getCharCode:function(event){
		if(typeof event.charCode == "number"){
			return event.charCode;
		}else{
			return event.keyCode;
		}
	}

5.5 节点变更事件

方法 说明 操作
DOMNodeRemoved 父元素删除子元素时就会触发 
//html
<body>
	<ul id="mylist">
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
	</ul>
	<div id="article">
		<input type="text" id="comment">
	</div>
</body>
//js代码
var mylist = document.getElementById("mylist");
EventUtil.addHandler(document, "DOMNodeRemoved", function(event){
	console.log(1111);
});
document.body.removeChild(mylist);

var child = document.getElementById("comment");
var parent = document.getElementById("article");
EventUtil.addHandler(parent, "DOMNodeRemoved", function(event){
	console.log(1111);
});
parent.removeChild(child);
DOMNodeInserted 父元素添加子元素时就会触发 
var mylist = document.getElementById("mylist");
var item = document.createElement("li");
item.innerText="item4";
EventUtil.addHandler(mylist, "DOMNodeInserted", function(event){
	console.log(1111);
});
mylist.appendChild(item);
DOMNodeInsertedIntoDocument 在文档中添加之前被触发 
var item = document.createElement("li");
item.innerText="item4";
var mylist = document.getElementById("mylist");
EventUtil.addHandler(item, "DOMNodeInsertedIntoDocument", function(event){
	console.log(1111);
});
mylist.appendChild(item);
DOMSubtreeModified DOM发生任何变化都会被触发 
var child = document.getElementById("comment");
var parent = document.getElementById("article");
var mylist = document.getElementById("mylist");
var item = document.createElement("li");
item.innerText="item4";
EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
	console.log(1111);
});
mylist.appendChild(item);
document.body.removeChild(mylist);
parent.removeChild(child);
DOMNodeRemovedFromDocument 文档中移除之前被触发 
//js

var child = document.getElementById("comment");

var parent = document.getElementById("article");

var mylist = document.getElementById("mylist");

var item = document.createElement("li");

var mylist = document.getElementById("mylist");

EventUtil.addHandler(mylist, "DOMNodeRemovedFromDocument", function(event){

console.log(1111);

});

document.body.removeChild(mylist);

parent.removeChild(child);//非document一级节点，不会被触发
DOMContentLoaded 在DOM树完成后就会触发
不会理会图像，javascript文件
 css文件或其他资源是否已经下载		 
EventUtil.addHandler(document, "DOMContentLoaded", function(event){
	console.log("直接执行");
});
readystatechange 支持IE，firfox，Opera，提供DOM或元素加载过程。
但与load事件一起使用时，很难预料执行过程
1 document.readyState==uninitalized 尚未初始化
2 loading对象正在加载数据
3 interactive可以操作对象，但还没完全加载
4 对象已经加载完毕		 
EventUtil.addHandler(document, "readystatechange", function(event){
	console.log(111);
});
hashchange 一定给window添加
判断#后面的值是否变化		 
EventUtil.addHandler(window, "hashchange", function(event){
	console.log(event.oldURL+"\n"+event.newURL);
});
//在URL后加#hello进行验证

5.6 移动端

方法说明操作
touchstart手指触摸屏幕时触发
var mybtn = document.getElementById("mybtn");
EventUtil.addHandler(mybtn, "touchstart", function(event){
	//当前触点的集合
	console.log("当前触摸屏幕的触摸点数组："+event.touches);
	//触点移动的信息
	console.log("数组中只包含引起事件的触摸点信息"+event.changedTouches);
	//只在元素上的触点
	console.log("只包含放在元素上的触摸信息："+event.targetTouches);
});
EventUtil.addHandler(mybtn, "touchmove", function(event){
	console.log("111111");
});
EventUtil.addHandler(mybtn, "touchend", function(event){
	console.log("111111");
});
touchmove手指在屏幕上滑动时触发
touchend手指从屏幕上移开时触发

5.7 示例：使用事件委托，点击不同标签更换颜色

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小项目</title>
<style>
/* 去掉默认样式 */
* {margin: 0;padding: 0;}
/* 大方框样式 */
#canvas {height: 500px;}
/* li的样式 */
ul li {list-style: none;float: left;width: 100px;height: 30px;line-height: 30px;text-align: center;color: white;border-radius: 10px;}
/* 分别设置每一个li的背景颜色 */
ul li:first-child {background: red;}
ul li:nth-child(2) {background: black;}
ul li:nth-child(3) {background: blue;}
ul li:nth-child(4) {background: yellow;}
ul li:last-child {background: green;}
</style>
</head>

<body>
<script>
// 先等其他标签元素加载完再执行script里的函数
window.onload = function () {
      // 获取大方框和ul
      var canvas = document.getElementById("canvas");
      var btn = document.getElementById("btn");
      // 采用事件委托方法，子元素li不设置事件，委托给父元素ul处理
      btn.addEventListener("click", function (event) {
      // 获取点击的目标
      var that = event.target;
      // 根据li里的内容是什么颜色就把大方框的背景改成什么颜色
      if (that.innerHTML == "红色") {
            canvas.style.backgroundColor = "red";
      } else if (that.innerHTML == "黑色") {
            canvas.style.backgroundColor = "black";
      } else if (that.innerHTML == "蓝色") {
            canvas.style.backgroundColor = "blue";
      } else if (that.innerHTML == "黄色") {
            canvas.style.backgroundColor = "yellow";
      } else if (that.innerHTML == "绿色") {
            canvas.style.backgroundColor = "green";
      }
});
}
</script>
<div id="canvas"></div>
<ul id="btn">
      <li>红色</li>
      <li>黑色</li>
      <li>蓝色</li>
      <li>黄色</li>
      <li>绿色</li>
</ul>
</body>
</html>
posted on 2020-09-19 11:42  singleSpace  阅读(192)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 singleSpace
Powered by .NET 8.0 on Kubernetes