• 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>

    运行截图:(这样就实现了)

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

  • 相关阅读:
    python的几个实例程序员节日快乐
    用python的time库写一个进度条
    用python绘画一些简单图片
    头文件板子
    Codeforces 606-C:Sorting Railway Cars(LIS)
    中南林业科技大学第十一届程序设计大赛- I:背包问题
    离散数学:用C语言来判断集合存在的二元关系
    中南林业科技大学第十一届程序设计大赛-C:有趣的二进制
    POJ 1611:The Suspects(并查集)
    POJ 2236:Wireless Network(并查集)
  • 原文地址:https://www.cnblogs.com/ldu-xingjiahui/p/12594053.html
Copyright © 2020-2023  润新知