感谢:链接(视频讲解很详细)
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>
运行截图:(这样就实现了)
文中哪里有错误请联系我。