事件对象
<div>我是div</div>
<script>
// 事件对象event
// 事件对象,指的是触发绑定事件的标签
// 有时触发事件的标签和绑定事件的标签,不是一个标签
// 就是所谓的 事件委托
// 事件对象,是事件处理函数的参数
// 这个参数中,JavaScript自动存储触发事件标签的相关信息
// 这个参数可以随便定义,一般定义成 event 或者 e,表示是 事件对象
// 事件对象有兼容处理
// 低版本ie有专门的语法来存储事件处理函数对象
// 一般浏览器 || 低版本IE浏览器
// 兼容语法 e = e || window.event
var oDiv = document.querySelector('div');
// 没有参数,就没有容器,就没有存储内容的变量
// 定义了参数,JavaScript程序,就自动向这个参数中,存储事件对象的相关信息
oDiv.onclick = function(e){
e = e || window.event;
console.log(e);
}
// 要组织默认事件的执行,必须是
// 事件对象.preventDefault();
// 阻止默认事件的执行,也有兼容,我们明天讲
</script>
button标签
<!-- button按钮的说明 -->
<form action="">
<!-- input标签 3种标签-->
<!-- 提交按钮 点击提交数据-->
<input type="submit" style="color:red;font-size: 50px;">
<!-- 刷新按钮 点击恢复默认数据-->
<input type="reset">
<!-- 普通按钮 点击啥用没有-->
<input type="button" value="普通标签">
<br>
<!-- button标签 在 form标签中 3种type效果-->
<!-- button标签,默认或者定义也是submit,提交标签效果 -->
<button>提交</button>
<button type="submit">提交</button>
<!-- button标签,type,reset,重置标签效果 -->
<button type="reset">重置</button>
<!-- button标签,type,button,普通标签效果 -->
<button type="button">普通标签</button>
<!--
button标签和input标签的区别
1,样式设定方便
button按钮中的内容,是标签的文字内容,可以直接按照css样式来设定
input标签,字体样式等可以设定,但是其他的样式设定,盒子模型,弹性盒模型等,无法支持的
2,H5中,给button标签,新增很多的功能,
H5中,对button标签做了专门的强化
实际项目中,推荐使用button标签,代替input按钮标签
总结:
input 能实现的 button都能实现
button 能实现的 input不一定能实现
推荐使用button
-->
</form>
键盘事件
<div>123</div>
<input type="text">
<script>
// 键盘事件
// 与 按键 相关的事件
// 键盘事件,不能绑定给某个标签
// 必须是, window 或者 document 两个使用效果完全一致
// 或者是, 可以被选中的,可以获取焦点的标签
// input select textarea button a ....
// keydown 按键按下事件 , 如果按住不会,会一直触发
// keyup 按键抬起事件
// window.onkeydown = function(){
// console.log(123);
// }
// document.onkeydown = function(){
// console.log(456);
// }
// var oDiv = document.querySelector('div');
// oDiv.onkeydown = function(){
// console.log(789);
// }
// var oIpt = document.querySelector('input');
// oIpt.onkeydown = function(){
// console.log(11111);
// }
// 按键的事件对象
// e.key 存储你按下的按键的名称
// 键盘区域的数值和小键盘区域的数值,不做区分,都是相同的
// e.keyCode 每个按键对应一个数值,绝对不会重复
// 使用这个属性来区分每个按键
// 按键编码
// 需要做兼容处理,兼容的是低版本的火狐浏览器
// var 变量 = e.keyCode || e.which
// 现在用的很少了
window.onkeydown = function(e){
console.log(e);
}
// 按键组合
// ctrl alt shift + 其他组合按键
// 事件对象e中有3个属性
// ctrlKey 按下 ctrl 结果是 true 没有按结果是false
// altKey 按下 alt 结果是 true 没有按结果是false
// shiftKey 按下 shift 结果是 true 没有按结果是false
// 判断按下按键是 ctrl + e (69)
// window.onkeydown = function(e){
// // 按下 ctrl键 按下,按键编码是69的按键
// if(e.ctrlKey == true && e.keyCode == 69){
// console.log('同时按下ctrl和e键');
// }
// }
</script>
触摸事件和特殊事件
<script>
// 触摸事件
// 用于移动端事件
// touchstart 触摸开始
// touchend 触摸结束
// touchmove 触摸移动
// 其他事件实际就是这三个事件的组合使用
// 长按 : 触摸开始和触摸结束之间的时间差 大于 1秒 0.5秒
// 计算 两个 触发时 时间戳 的 差
// : 或者触发 触摸开始事件 超过 1秒 或者 0.5秒
// 轻触 : 触摸时间差小于 100毫秒
// 左移 : 触摸开始,触摸结束,坐标差
// 到3阶段,讲App和小程序时会有框架的语法形式,来定义执行事件
// 特殊事件
// 当过度结束时 transitionend 当过度结束时执行
// 当动画结束时 animationend 当动画结束时执行
// 有几个执行属性,程序就执行几次操作
var oDiv = document.querySelector('div');
oDiv.ontransitionend = function(){
console.log('过度结束了')
}
</script>
// 事件对象的目标
// 1,事件对象
// 触发事件时,JavaScript自动向参数中存储的触发事件的标签的信息
// 兼容语法 e = e || window.event
// 2,事件对象的目标
// e.target
// 绑定事件标签的子级标签,也会触发父级绑定的事件
// 此时触发事件的对象是子级标签,不是绑定事件的标签
// 低版本的IE浏览器,没有 事件对象.target
// 有 srcElement
// 兼容语法 : var eTar = e.target || e.srcElement
var oDiv = document.querySelector('div');
oDiv.onclick = function(e){
e = e || window.event;
console.log(e);
}
