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

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

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

  • 相关阅读:
    asp.net Forms验证跨域页面不能访问的问题
    JavaScript创建命名空间
    DataTable转换成JSON字符串的函数
    javascript 正确截取单字节和双字节混和字符串的方法
    异常详细信息: 不能通过已删除的行访问该行的信息
    HttpUtility.ParseQueryString直接从字符串URL中提取参数
    支持函数,变量的算术表达式计算(三、加入函数)
    mp3 分类管理工具
    我好累
    电饭煲是如何知道饭已熟了的
  • 原文地址:https://www.cnblogs.com/ldu-xingjiahui/p/12594053.html
Copyright © 2020-2023  润新知