事件

最新推荐文章于 2024-11-04 16:17:23 发布

thanksKlan

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量120

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/hasakizzz66/article/details/108065730

版权

JS通用

通过选择器获取元素
1.selector 要获取的元素的id/class/标签名
2.context 从哪个范围获取
3.return 获取到的元素或者元素伪数组

  function my$(selector, context) {
        context = context || document
        if (selector.indexOf('#') === 0) {
            return document.getElementsById(selector.slice(1))
        }
        if (selector.indexOf('.') === 0) {
            return context.getElementsByClassName(selector.slice(1))
        }
        return context.getElementsByTagName(selector)
    }

获取设置元素的样式

ele 元素
attr 要获取 / 设置的属性
value 要获取 / 设置的属性值
return 获取 / 设置好的属性值
function css(ele, attr, value) {
if (value) {
ele.style[attr] = value
}
return window.getComputedStyle ? window.getComputedStyle(ele)[attr] :
ele.currentStyle[attr]
}

！！事件！！

    事件的组成部分
    1. 事件源（ 由谁触发）
    2. 绑定事件的方式 on
    3. 事件类型 click
    例：
    var oDiv=document.querySelector('div')
    oDiv.onclick=function(){}

谁来触发事件 => oDiv => 这个事件的事件源就是oDiv
触发什么事件 => onclick => 这个时间类型就是click
触发之后做什么 => function(){} => 这个事件的处理函数

当我们想要在点击div以后做什么事情，就把我们要做的事情写在事件处理函数里面
例：
var oDiv=document.querySelector(‘div’)
oDiv.οnclick=function(){
console.log(‘你点击了div’);
}

事件对象
每一个事件对象都会有一个对应的对象来描述这些信息，我们就把这个对象叫做事件对象。

兼容写法
oDiv.οnclick=function(e){ e就是和IE的window.event一样的东西

e=e||window,event 这个就是兼容性写法
console.log(e.X轴坐标点信息);
console.log(e.Y轴坐标点信息);
}
在每一个事件里面，想获取事件对象的时候，都用兼容写法

常见的事件
浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件

浏览器事件
load: 页面全部资源加载完毕
scroll: 浏览器滚动的时候触发
鼠标事件
click: 点击事件
dblclick：双击事件
contextmenu: 右键单击事件
mousedowm: 鼠标左键按下事件
mouseup: 鼠标左键抬起事件
mousemove: 鼠标移动
mouseover: 鼠标移入事件
mouseout: 鼠标移出事件
mouseenter: 鼠标移入事件
mouseleave：鼠标移出事件
键盘事件
keyup：键盘抬起事件
keydown：键盘按下事件
keypress：键盘按下再抬起事件
表单事件
change: 表单内容改变事件
input: 表单内容输入事件
submit: 表单提交事件
触摸事件
touchstart: 触摸开始事件
touchend: 触摸结束事件
touchmove: 触摸移动事件

获取键盘码的兼容写法

var keyCode = e.keyCode || e.which
    console.log(keyCode)
    }

组合按键
altKey： alt 键按下得到 true，否则得到 false
shiftKey： shift 键按下得到 true，否则得到 false
ctrlKey： ctrl 键按下得到 true，否则得到 false
我们就可以通过这三个属性来判断是否按下了
例：

        document.onkeyup = function(e) {
            e = e || window.event
            keyCode = e.keyCode || e.which

   if (e.altKey && keyCode === 65) {
                console.log('你同时按下了 alt 和 a')
            }
        }

事件的绑定方式
我们现在给一个注册事件都是使用 onxxx 的方式
但是这个方式不是很好，只能给一个元素注册一个事件
oDiv.onclick = function() {
console.log(‘我是第一个事件’)
}
oDiv.onclick = function() {
console.log(‘我是第二个事件’)
}
一旦写了第二个事件，那么第一个就被覆盖了

事件监听
var dv = document.querySelector(“div”)
添加事件监听可以添加多个相同的事件
IE8 及以下不支持
dv.addEventListener(‘click’,function(){
console.log(123)
})

dv.addEventListener(‘click’,function(){
console.log(456)
})

IE10 及以下支持
dv.attachEvent(‘onclick’, function() {
console.log(123)
})

dv.attachEvent(‘onclick’, function() {
console.log(456)
})

对上面两个做一个兼容处理
function on() {
}

点击事件的光标坐标点获取

offsetX 和 offsetY
是相对于你点击的元素的边框内侧开始计算
例：
var oDiv = document.querySelector(‘div’)

   点击事件
    oDiv.onclick = function(e) {
    事件对象兼容写法
        e = e || window.event
        console.log(e.offsetX);
        console.log(e.offsetY);
    }

相对于浏览器窗口你点击的坐标点
clientX 和 clientY
是相对于浏览器窗口来计算的，不管你页面滚动到什么情况，都是根据窗口来计算坐标
写法同上
相对于页面你点击的坐标点
pageX 和 pageY
是相对于整个页面的坐标点，不管有没有滚动，都是相对于页面拿到的坐标点
写法同上

实现自动回复的聊天功能
打字按enter发过去，就可以得到回复，回复内容自定义修改
在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 600px;
            border: 2px solid green;
            margin: 100px auto;
        }
        
        .title {
            height: 40px;
            width: 100%;
            background-color: green;
        }
        
        .msg {
            height: 400px;
            border-bottom: 2px solid #000;
            box-sizing: border-box;
            padding: 10px;
            overflow: auto;
        }
        
        input {
            display: block;
            height: 150px;
            width: 100%;
            border: none;
            outline: none;
            padding: 10px;
            box-sizing: border-box;
        }
        
        .left {
            color: green;
        }
        
        .right {
            text-align: right;
            color: hotpink;
            font-weight: 900;
        }
        
        p {
            margin: 20px 0;
            line-height: 40px;
            height: 40px;
            font-size: 26px;
            padding: 10px 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title"></div>
        <div class="msg">
        </div>
        <input type="text">
    </div>

    <script src="utils.js"></script>
    <script>
        var arr = ['我暗恋你好久了', '我也喜欢你', '哥哥在干嘛？', '醒醒吧', '梦里啥都有']
        var arr2 = ['甜甜', '静静', '翠芬']
        var msg = my$(".msg")[0]
        var inp = my$("input")[0]
        inp.onkeydown = function(e) {
            e = e || window.event
            if (e.keyCode === 13) {
                var p1 = document.createElement("p")
                var p2 = document.createElement("p")
                p1.innerText = this.value
                p1.className = "right"
                p2.className = "left"
                this.value = ''
                msg.appendChild(p1)
                var num1 = getRandom(0, arr.length - 1)
                var num2 = getRandom(0, arr2.length - 1)
                p2.innerText = arr2[num2] + ':' + arr[num1]
                msg.appendChild(p2)
                p1.scrollIntoView();
                p2.scrollIntoView();


            }
        }
    </script>
</body>

</html>