JavaScript学习DAY11

DAY11

一、事件的组成部分

		- 事件源
		- 事件类型
         - 绑定事件的方式 
         	 元素.事件 = function(){}
         - 事件处理函数 function(){}

二、常见的事件

			鼠标事件
                - click
                - dblclick 双击
                - mouseenter 鼠标进入
                - mouseleave 鼠标移开
                - mouseover 鼠标进入
                - mouseout 鼠标移开
                - mousemove  鼠标移动
                - contextmenu 右键菜单
                - mousedown 鼠标按下
                - mouseup  鼠标抬起
            键盘事件 
              只给能在页面上选中的元素（表单元素） 和 document 来绑定键盘事件
              注:不能给页面上一个 div 元素，设置键盘事件的
                - keydown 键盘按下
                - keyup 键盘抬起
                - keypress 输入
                - keyCode  获取按键编码
            表单事件
                - submit 
                - focus  获取焦点
                - blur   失去焦点
                - input  输入触发
                - change 失去焦点以后文本框的内容发生改变的时候触发
            浏览器事件
                - load  页面资源全部加载完毕
                - scroll  页面滚动时触发
                - resize  窗口改变事件
            移动端事件
                - touchstart  手指触碰到屏幕
                - touchmove 手指移动
                - touchend 手指抬起
            html事件
            onload：当页面完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发

            onselect：当用户选中文本框(input 或 textarea)中的一个或多个字符触发

            onselectstart：主要是用于禁止用户选中网页中的文字的默认行为

			例如：
			document.onselectstart = function(){
				return false;
			}

			onchange：当用户改变文本框(input 或 textarea)内容时且失去焦点后触发

			onfocus：当页面或者元素获得焦点时触发

			onblur：当页面或元素失去焦点时触发

			onsubmit：当用户点击提交按钮在<form>元素上触发  

			onresize：当窗口或框架的大小变化时在 window 或框架上触发

			举例：window.onresize=function(){ alert(‘dw’); };

			scroll：当用户滚动带滚动条的元素时触发

			举例：window.onscroll=function() { alert(‘dw’); };

			oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。                  

三、事件对象

只要触发事件，生成一个事件对象

//事件绑定
语法：元素.onclick = function(){
       //执行代码
}

oDiv.onclick = function (e) {
  e = e || window.event // 兼容写法
  console.log(e.X轴坐标点信息)
  console.log(e.Y轴坐标点信息)
}

四、三大系列

1、client

​ clientWidth clientHeight 内容 + padding
​ clientLeft clientTop 左边框和上边框的宽度
​ clientX clientY 光标到可视窗口左边和上边的距离

2、offset

​ offsetWidth offsetHeight 内容 + padding + border
​ offsetLeft offsetTop 元素距离有定位的父元素左边和上边的距离 如果都没定位 那就是相对于 body
​ offsetParent 有定位的父元素
​ offsetX offsetY 光标到当前元素左边和上边的距离(相对于自身的距离)

3、page

​ pageX pageY 光标到页面左边和上边的距离（没有出现滚动条时和client相等）

​ 获取滚动的高度和宽度

		 console.log(box.scrollHeight);

​ console.log(box.scrollWidth);

pointer-events: none;

​ 1、表示元素不会对mouse/touch相关事件作出响应

​ 2、解决JS鼠标事件穿透到子标签。

五、拖拽

 1、获取元素
 2、鼠标按下事件
 3、鼠标移动
   - 计算元素的位置
 4、鼠标抬起

    var dv = document.querySelector('div')
    dv.onmousedown = function(e){
        e = e || window.event
        // 先记录下 鼠标到元素左边和上边的距离
        var _x = e.offsetX, _y = e.offsetY
        document.onmousemove = function(e){
            e = e || window.event
            // 获取光标到页面(可视窗口)左边和上边的距离
            var x1 = e.pageX , y1 = e.pageY
            // console.log(x1,y1)
            // 计算元素移动的距离
            var _left = x1 - _x,
                _top = y1 - _y
            // 判断边界
            if(_left <= 0){
                _left = 0
            }else if( _left >= document.documentElement.clientWidth - dv.offsetWidth){
                _left = document.documentElement.clientWidth - dv.offsetWidth
            }
            if(_top <= 0){
                _top = 0
            }else if( _top >= document.documentElement.clientHeight - dv.offsetHeight){
                _left = document.documentElement.clientHeight - dv.offsetHeight
            }
            
            // 设置元素移动的距离
            dv.style.left = _left + 'px' 
            dv.style.top = _top + 'px' 
        }
    }

    document.onmouseup = function(){
        // 去掉 move 事件  给 mousemove 事件重新赋值
        document.onmousemove = null
    }

六、表单事件

onsubmit
        表单提交事件

        表单提交默认执行过程
          点击提交按钮时
            1. 触发表单提交事件 onsubmit
            2. 执行form表单 的action动作, 跳转到action动作指定的url地址页面去
            3. 同时将表单项作为参数传递到跳转的界面
            注: 只有表单提示按钮才能触发表单提交事件 
                <input type="submit" />

        表单验证
           非空验证: 判断表单项是否为空

        在表单提交事件实现表单验证功能   
            表单form
            form.onsubmit = function(){
                if (userName == '') {
                    alert('用户名不能为空!')
                    return false
                }
                if (password == '') {
                    alert('密码不能为空!')
                    return false
                }
            }

        阻止默认form表单 action动作
            事件属性  
              <form onsubmit="return onLogin()"/>
              <form onsubmit="return false"/>
            
       实际项目开发中 
          处理表单提交事件方式
            1. 使用普通按钮 代替 submit提交按钮
               <input type="submit" />  submit提交按钮
               <input type="button" /> 普通按钮
            
            2. 手动跳转 代替 默认action动作
               location.href = url地址

 	<input type="button" value="登录" class="login-btn">                 
      <script>
        var loginBtn = document.querySelector('.login-btn')
        loginBtn.onclick = function(){
            var userName = userNameEle.value  // 一定要放在提交事件内
            var password = passWordEle.value 
            if(userName == ''){
                alert('用户名不能为空!')
                return
            }
            if(password == ''){
                alert('密码不能为空!')
                return
            }

            location.href = `http://www.baidu.com?username=${userName}&password=${password}`
        }
	  </script>

七、键盘事件

	1. 事件源
          表单项input
          document
    2. 键盘事件
          keyup
          keydown
          keypress
		 写法:    document.onkeyup = function(){
              }
     3. 按键

//事件对象兼容性写法:
document.onkeyup = function(e){
            e = e || window.event
            // 兼容性写法 获取按键值
            var code = e.keyCode || e.which
            if(code == 13){
                location.href = 'http://www.baidu.com'
            }
        }
//组合按键
document.onkeyup = function(e){
            e = e || window.event
            // 兼容性写法 获取按键值
            var code = e.keyCode || e.which
            if(e.altKey && code == 66){
                alert('alt + b 组合键')
            }
        }

八、单机版聊天

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

<script src="./utils.js"></script>
<script>
    // 1、获取元素
    // 2、shift + alt + 回车 发送消息   ->  获取文本框的内容
    // 3、创建一个元素 追加到 msg 里面
    // 4、回消息 创建元素  追加到 msg 里面

    var msg = document.querySelector('.msg'),
        inp = document.querySelector('input'),
        person = ['白敬亭', '桃谷', '龙泽', '波多', '老王', '某c姓老师'],
        arr = ['来', '滚', '你家我家不如如家', '来我家逛一逛', '可以去你家看猫吗', '她在洗澡', '有内鬼终止交易', '阿伟si了', '我在千锋跳广场舞']
    // 给 input 绑定一个键盘事件
    inp.onkeydown = function (e) {
        e = e || window.event
        // 判断是否按下组合键
        if (e.shiftKey && e.altKey && e.keyCode === 13) {
            // console.log('发送')
            // 获取文本框的内容
            var content = this.value
            // console.log(content)
            // 创建元素 扔到页面
            var p = document.createElement('p')
            p.innerText = content + ':我'
            p.className = 'right'
            msg.appendChild(p)
            // 清空输入框
            this.value = ''
            // 别人回的 消息 创建 p 标签
            var p = document.createElement('p')
            var person1 = person[getRandom(0, person.length - 1)]
            p.innerText = person1 + ':' + arr[getRandom(0, arr.length - 1)]
            p.className = 'left'
            msg.appendChild(p)
        }
    }
</script>