JavaScript触发器

感谢：链接（视频讲解很详细）

JavaScript触发器

一、功能

顾名思义就是操控鼠标或键盘触发（实现）一些特定功能。

二、功能实现

<script type="text/javascript">
	var changeColor=function () {
		document.body.style.backgroundColor='purple';
	}
	document.body.οnclick=changeColor;
	document.body.addEventListener('click',changeColor);
        //上面两个操作都是实现点击html的body区域会调用函数，但有区别，下面会讲解
</script>

三、两种实现方式的区别

方法一：

<script type="text/javascript">
	var changeColor=function() {
		document.body.style.backgroundColor='purple';
	}
	var changeFount=function(){
		document.body.style.fontSize='5px';
		document.body.style.color='green';
	}
	document.body.οnclick=changeColor;
	document.body.οnclick=changeFount;
</script>

运行截图：（可以看到，多个操作同时作用在body中仅实现了最后的一个操作，即只修改了文字大小）

方法二：

<script type="text/javascript">
	var changeColor=function() {
		document.body.style.backgroundColor='purple';
	}
	var changeFount=function(){
		document.body.style.fontSize='5px';
		document.body.style.color='green';
	}
	document.body.addEventListener('click',changeColor);
	document.body.addEventListener('click',changeFount);
        ///区别第一种操作
</script>

运行截图：（多个操作都实现了，即改变了背景颜色又修改了字体大小）

总结：多个onclick同时作用在一个对象时，只会实现最后的一个，但addElementListener会依次实现每一个操作。

二、具体常用事件分类

（图源上面视频链接，通过比较上面的两种实现方法，主要选用第二种实现）

1、鼠标事件（代码中注释描述很清晰，不再截运行图）

<script type="text/javascript">
	var al=function(){ //弹窗函数
		alert('nihao');
	}
	document.body.addEventListener('click',al); //鼠标点击body区域弹窗
	document.body.addEventListener('mousedown',al);//鼠标按下左键弹窗
	document.body.addEventListener('mouseup',al);//鼠标松开左键弹窗
	document.body.addEventListener('mousewheel',al);//鼠标滚动滚轮弹窗
	document.body.addEventListener('mousemove',al); //鼠标移动弹窗
	document.body.addEventListener('mouseenter',al); //鼠标指针滑入body区域弹窗
	document.body.addEventListener('mouseleave',al); //鼠标指针滑出body区域弹窗
</script>

2、键盘事件(一般要在document下，而不是其它对象下实现)

//注意时document. 和上面不同
<script type="text/javascript">
	var al=function(){ //弹窗函数
		alert('nihao');
	}
        document.addEventListener('keypress',al); //按一下按键弹窗
	document.addEventListener('keydown',al); //按下按键弹窗
	document.addEventListener('keyup',al); //松开按键弹窗
</script>

3、表单事件

<script type="text/javascript">
	var condition=function(){ //函数
		console.log('点击了文本框');
	}
	var inp0=document.getElementById('i0');
	inp0.addEventListener('focus',condition);//点击输入框内部时调用函数
	//inp0.addEventListener('blur',condition);//从输入框中脱离时（点击输入框外面时）调用函数
	//inp0.addEventListener('input',condition);//在输入框中输入时调用函数
</script>

运行截图：（用到了Chrome的console调试台，不懂的看：链接）

4、页面事件

解决：上面学习了键盘事件，可怎么知道按的是什么键？

①先从调控台看下result中是什么

<script type="text/javascript">
	var condition=function(result){ //弹窗函数
		console.log(result);
	}
	document.addEventListener('keypress',condition);
</script>

运行截图：（其实我按的就是p）

②所以进一步修改代码：

<script type="text/javascript">
	var condition=function(result){ //弹窗函数
		console.log(result.key); //因为p被放在key这个键里面了，所以访问它就行了
	}
	document.addEventListener('keypress',condition);
</script>

运行截图：（这样就实现了）

文中哪里有错误请联系我。