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>

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

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

巴特西

JavaScript触发器

JavaScript触发器

最新文章

热门文章