在JS中的事件是: 用户在页面上操作, 然后我们要调用函数来处理.
比如: 1, 点击了登录按钮, 调用登录函数执行登录操作
2, 鼠标拖拽, 调用函数实现拖拽
function里面是可以使用arguments来获取参数数组
<button>按钮1</button>
<script>
document.getElementsByTagName('button')[0].onclick = function(){
获取参数 发现对应的arguments里面只有一个参数 这个参数类型为 pointerEvent
这个pointerEvent是什么？ 坐标事件源
console.log(arguments);
console.log(arguments[0]); //获取的是一个pointerEvent 可以获取坐标 x: 34 y: 18 就是我们鼠标的坐标
鼠标事件中
console.log(arguments[0].x); //x坐标
console.log(arguments[0].y); //y坐标
console.log(arguments[0].target); //获取触发的元素
console.log(arguments[0].type); //触发的事件
加在键盘事件
console.log(arguments[0].altKey); //是否按了alt键 是返回true不是返回false
console.log(arguments[0].shiftKey); //是否按了shift键 是返回true不是返回false
console.log(arguments[0].ctrlKey); //是否按了ctrl键 是返回true不是返回false
这个arguments[0]其实是拿到了我们对应的事件源对象
但是像上面这样写太长了 所以我们有内置的事件源对象 window.event
鼠标按下的是那边的 0左 1滚 2右
console.log(arguments[0].button);
}
KeyboardEvent的事件源对象 键盘事件源 他也是个event
window.onkeyup = function(e){ //e是形参 随便写 一般建议写e（规范）
console.log(arguments[0]); e是不是就相当于arguments[0] //获取第一个参数
console.log(e);
console.log(window.event); //window.event的对象其实就是这个e
e = e || window.event //window.event写后面 拿到的就是事件源对象 常用写法
console.log(e.code); //获取你按下的键
console.log(e.key); //获取你按下键的值
console.log(e.keyCode); //获取按键的ascii吗
console.log(e.altKey); //是否按下的是alt键 不常用
console.log(e.shiftKey);
console.log(e.ctrlKey);
}
</script>
事件分为三类 鼠标事件 键盘事件 html事件
鼠标事件 鼠标的一切操作都是鼠标事件 点击 移动 滚轮
键盘事件 一般操作是给整体加 onkeydown键盘按下 onkeyup键盘弹起 onkeypress按下之后弹起之前
html的事件 页面加载事件 默认触发的 执行一次
<div id="box">
<p>sssss</p>
</div>
<form action="#" id="form">
<input type="submit">
<button type="submit">提交</button>
</form>
<input type="text" id="input">
<script>
鼠标事件 鼠标的一切操作都是鼠标事件
点击 移动 滚轮
var box = document.getElementById('box')
点击相关 点击 click和双击 dblclick
box.onclick = function(){console.log('点击了');}
box.ondblclick = function(){console.log('双击');}
移动相关 事件名以mouse开头 鼠标按下 onmousedown 鼠标弹起 onmouseup
鼠标移出 onmouseout 鼠标移进 onmouseover 鼠标移动 onmousemove
鼠标悬停 onmouseenter 鼠标取消悬停 onmouseleave
box.onmousedown = function(){console.log('鼠标按下了');}
box.onmouseup = function(){console.log('鼠标弹起了');}
box.onmouseout = function(){ console.log('鼠标移出了'); }
box.onmouseover = function(){console.log('鼠标移进了');}
box.onmousemove = function(){console.log('鼠标移动了'); }
box.onmouseleave = function(){console.log('鼠标取消悬停了');}
box.onmouseenter = function(){ console.log('鼠标悬停了');}
mouseover和 mouseenter的区别是:
mouseover: 元素的子元素移入也会触发事件 (子元素会触发第二次)
mouseenter : 元素的子元素移入不会触发事件 (子元素不会触发)
键盘事件 一般操作是给整体加 onkeydown键盘按下 onkeyup键盘弹起 onkeypress按下之后弹起之前
window.onkeydown = function(){console.log('键盘按下');}
window.onkeyup= function(){console.log('键盘弹起');}
window.onkeypress = function(){console.log('按下之后弹起之前');}
html的事件 页面加载事件 默认触发的 执行一次
window.onload = function(){console.log('页面加载了');}
onsubmit事件 提交按钮触发的事件 一般触发的元素是表单form
document.getElementById('form').onsubmit = function () { console.log('提交了');}
失去焦点 onblur 获取焦点 onfocus （常用于input）
document.getElementById('input').onfocus = function(){console.log('获取焦点');}
document.getElementById('input').onblur = function(){console.log('失去焦点');}
</script>
事件讲解 书写位置
事件由三部分组成 触发事件的元素 对应的事件函数 事件的处理函数
内联模式 直接在标签内容以指定属性的方式 较少
<button onclick="alert('hello')">点击</button>
内联模式 直接在标签内容以指定属性的方式 常用1
<button onclick="handlerClick()">点击1</button>
<button>点击2</button>
<button>点击3</button>
js事件是指我们使用鼠标或者键盘做了某些事件来触发对应的处理函数 -->
<script>
function handlerClick(){
console.log('hello'); }
onclick是事件 表示点击事件 执行的操作
function是处理的函数 表示我们要做的事情 脚本模式（使用比较多 js和html分离 规范 常用2）
document.getElementsByTagName('button')[2].onclick = function(){ console.log('hello'); }
触发事件的元素 document.getElementsByTagName('button')[2]
对应的事件 onclick
处理函数 function(){}
document.getElementsByTagName('button')[3].onclick = handlerClick //不需要加() 加括号会自动执行 常用3
触发事件的元素 document.getElementsByTagName('button')[3]
事件 onclick
处理函数 handlerClick
事件由三部分组成 触发事件的元素 对应的事件函数 事件的处理函数
事件函数的特点 全小写且以on开头 onclick on事件开头 click是事件名 点击
</script>
事件分为三类 鼠标事件 键盘事件 html事件
鼠标事件 鼠标的一切操作都是鼠标事件
点击 移动 滚轮
var box = document.getElementById(‘box’)
点击相关 点击 click和双击 dblclick
box.onclick = function(){ console.log(‘点击了’); }
box.ondblclick = function(){ console.log(‘双击’); }
移动相关 事件名以mouse开头 鼠标按下 onmousedown 鼠标弹起 onmouseup
鼠标移出 onmouseout 鼠标移进 onmouseover 鼠标移动 onmousemove
鼠标悬停 onmouseenter 鼠标取消悬停 onmouseleave
box.onmousedown = function(){ console.log(‘鼠标按下了’); }
box.onmouseup = function(){ console.log(‘鼠标弹起了’); }
box.onmouseout = function(){ console.log(‘鼠标移出了’); }
box.onmouseover = function(){console.log(‘鼠标移进了’); }
box.onmousemove = function(){ console.log(‘鼠标移动了’); }
box.onmouseleave = function(){console.log(‘鼠标取消悬停了’); }
box.onmouseenter = function(){ console.log(‘鼠标悬停了’); }
mouseover和 mouseenter的区别是:
mouseover: 元素的子元素移入也会触发事件 (子元素会触发第二次)
mouseenter : 元素的子元素移入不会触发事件 (子元素不会触发)
键盘事件 一般操作是给整体加 onkeydown键盘按下 onkeyup键盘弹起 onkeypress按下之后弹起之前
window.onkeydown = function(){console.log(‘键盘按下’);}
window.οnkeyup= function(){console.log(‘键盘弹起’); }
window.onkeypress = function(){console.log(‘按下之后弹起之前’);}
（字符案件包含字母数组下划线特殊符号及回车和空格）
html的事件
页面加载事件 默认触发的 执行一次
window.onload = function(){ console.log(‘页面加载了’); }
onsubmit事件 提交按钮触发的事件 一般触发的元素是表单form
document.getElementById(‘form’).onsubmit = function () { console.log(‘提交了’); }
失去焦点 onblur 获取焦点 onfocus （常用于input）
document.getElementById(‘input’).onfocus = function(){console.log(‘获取焦点’);}
document.getElementById(‘input’).onblur = function(){ console.log(‘失去焦点’); }
var text = document.getElementById(‘text’)
onchange 修改 当里面的值value发生变化以后 失去焦点的时候触发 加给表单元素 重点
text.onchange = function(){console.log(‘修改事件’);}
onscroll 滚动栏滚动 重点
window.onscroll = function(){
var scroll = document.documentElement.scrollTop || document.body.scrollTop
console.log(scroll);}
onselect 选择 （一般用于复制粘贴 input textarea） 半重点
var textarea = document.getElementById(‘textarea’)
textarea.onselect = function(){console.log(‘选择了’);}
unload 卸载 页面被卸载的时候 组件被卸载
window.unload = function(){console.log(‘页面卸载了’); }
reset 重置的时候 加给form
document.getElementsByTagName(‘form’)[0].onreset = function(){console.log(‘重置’); }
8656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
