子节点含有表单元素的div元素的blur事件_div blur事件_I_recluse的博客

相关文章推荐
有情有义的铁板烧 · 基于Caret进行随机森林随机调参的4种方式 ...· 2 月前 ·
慈祥的鸵鸟 · 轻量化AlphaPose_alphapose ...· 4 月前 ·
苦闷的骆驼 · 解决"System.Data.OracleC ...· 6 月前 ·
刚毅的卤蛋 · 如何在VB.NET中插入Excel公式？· 7 月前 ·
飞翔的枕头 · Python的Tkinter去除边框-CSDN博客· 1 年前 ·
1.div元素的blur事件
blur事件一般在表单元素如input元素才是存在的，对div、span等元素时无效的，但是可以给div元素加上tabindex属性，也可以让div等元素有焦点，所以blur事件就有效了，如：
    <div id="divblur" tabindex="2">
        <span>类型：</span>
    document.querySelector('#divblur').addEventListener('blur', function(e){
        console.log('blur event')
点击div元素，就会触发blur事件，控制台会打印日志 "blur event" 
但是，会有一个问题，由于添加了‘tabindex’属性，当你点击div元素的时候，div元素周围会有一个蓝色的焦点轮廓，如下图： 
这样对有些人来说是不可接受的，那么怎么把它去掉呢，很简单，直接在div元素上加上'outline: none' 的样式就可以了。如： 
    <style>
        #divblur{
            outline: none;
    </style> 
2.子节点含有表单元素如input元素的div的blur事件 
如果你有这样的需求：div元素包裹有input元素，当你在input框中输入一些文本后，点击这个div元素区域外侧，这时你想让整个div失去焦点触发blur事件，在blur事件中进行一些逻辑处理。但是你直接给div绑定blur事件，或者给div加上tabindex属性然后再绑定blur事件，你发现都不会触发div元素的blur事件。 
    <div id="divblur" tabindex="2">
        <span>div元素的blur事件</span>
        <input type="text" />
    document.querySelector('#divblur').addEventListener('blur', function(e){
        console.log('blur event')
这是因为blur事件不支持冒泡，你在input中输入文字后，然后点击外侧区域失去焦点，此时如果input元素绑定了blur事件，就会触发该事件，但是不会冒泡到父元素div上，也就不会触发blur事件。 
那么，有什么办法可以达到目的呢，有两种方法： 
（1）既然blur事件不支持冒泡, 那就启用捕获，在捕获阶段触发div的blur事件 
    <div id="divblur" tabindex="2">
        <span>div元素的blur事件</span>
        <input type="text" />
    // 第三个参数设为true，开启捕获
    document.querySelector('#divblur').addEventListener('blur', function(e){
        console.log('blur event')
    }, true) 
（2）使用focusout事件替代blur事件，focusout事件和blur事件基本上效果是一样的，不同的是，focusout事件支持冒泡。 
    <div id="divblur" tabindex="2">
        <span>div元素的blur事件</span>
        <input type="text" />
    // focusout事件代替blur事件
    document.querySelector('#divblur').addEventListener('focusout', function(e){
        console.log('blur event')
最后需要说明的是，这两种方法，div元素tabindex属性都需要加上，因为div本身没有焦点属性。
                    blur事件一般在表单元素如input元素才是存在的，对div、span等元素时无效的，但是可以给div元素加上tabindex属性，也可以让div等元素有焦点，所以blur事件就有效了。但如果你有这样的需求：div元素包裹有input元素，当你在input框中输入一些文本后，点击这个div元素区域外侧，这时你想让整个div失去焦点触发blur事件，在blur事件中进行一些逻辑处理。但是你直接给div绑定blur事件，或者给div加上tabindex属性然后再绑定blur事件，你发现都不会触发div
				表单元素拥有submit方法，同时也具有onsubmit事件句柄，用于监听表单提交。可以使用elemForm.submit();方法触发表单提交。1、表单元素中出现了name=”submit”的元素这种情况下elemForm.submit();将不会触发表单提交，因为表单原始的submit方法将会被覆盖（formElem.submit就是对该元素的引用）。2、elemForm.submit();不会触发表单的onsubmit事件没有为什么，标准中就是这么规定的。与此有些类似的是onfocus、onblur和focus()、blur()之间的关系却不同，调用elem.blur()或elem.fo
				看本文得先了解以下几个事件（摘自w3c）。 blur事件: 当元素失去焦点时发生 blur 事件。 focus事件:focus() 方法用于赋予文本域焦点(也值让某些元素得到焦点事件)。 tabIndex属性:tabIndex 属性可设置或返回按钮的 tab 键控制次序。 我们都知道blur只是针对form表单控件的，而对于 span , div , li 之类的，则没办法触发它们的动作，现在我们只需要设置一个tabindex属性则可以触发它们的焦点事件了。 真实项目代码:  代码如下: Esc.PopupMenu.prototype._createPopup=function(){ var 
<input type="text" value="默认值"><br><br><div>搜索</div>
想要实现的结果：
1、input框获取焦点时value为“”，失去焦点时value为“默认值”；—–这个很好实现；　　　　　　　　
2、当在input框中输入要搜素的内容后，点击div搜索，要求控制台打印输出要搜素的内容（当然每个项目的需求不同，这里只是举个例子），而且要求点击后不影响input的focus和blur行为；—-这个才是重点
先看看冲突没有解决之前的效果;
$("input").focus(fu
				初学js事件，想做一个点击时变红，取消聚焦时变白的div，于是我这样写代码：
<div style="width: 100px;height: 50px;border: 1px solid;"></div>
<script>
    let div = document.getElementsByTagName("div")[0];
    //点击时变红
    div.onclick = function(){
        this.style.backgroun
				用防抖实现DIV鼠标移出消失
由于div标签本身不支持onblur事件，所以对于点击一个按钮弹出的div，我们想要当这个div失去焦点的时候，让它消失不能使用的onblur来实现。
但是可以利用onmouseout和事件来实现DIV失去焦点消失的功能。直接使用onmouseout来实现移出消失可能会有一个问题：假设你的按钮的位置和弹出的div的位置不是重合的那么会导致鼠标移动就会马上去触发onmouseout事件,从而没什么卵用。
利用防抖、onmouseout、onmouseover组合来实现一个体验很好的blur事件
     *鼠标移动过div事件
像上面，div就有了focus或者blur事件
tabindex可以设置tab键在控件中的移动顺序。
当tabindex=0时，该元素可以用tab键获取焦点，且访问的顺序是按照元素在文档中的顺序来focus，即使采用了浮动改变了页面中显示的顺序，依然是按照html文档中的顺序来定位。
当tabindex=-1时，该元素用tab键获取不到焦点，但是
				默认情况下div无法获取焦点，无法触发focus与blur事件，猜测span，a等标签也无法触发焦点事件(input:button，及button标签可以触发)
如何使div触发blur事件：可以给div加上tabindex属性
在线演示：http://sandbox.runjs.cn/show/e0bvfcag
<!DOCTYPE html>
<html...
div 默认是没有 blur 事件的,但是给个 tabindex=“0” 和 outline=“0” 就能有 blur 事件了,下列给 hidefocus=“true” 的原因是兼容ie浏览器
效果图 及 代码
点击黑块让它先聚焦,现在控制台是空的
点击周围的空白区域,让黑块失焦,这时控制台输出了 “失焦了”
<!DOCTYPE html>
<html lang="cn">
    <meta charset="UTF-8">
				onblur失去焦点事件只能在input、a、button等元素上绑定，在某些情况下无法使用这些标签，需要给div元素绑定onblur事件。
    这时候可以给div绑定tabIndex属性：
<div tabindex="0" onblur="functionA"></div>
    PS：tabIndex属性应该绑定number，根据w3c的解释，tabIndex是tab 键用于导航时规定元素的 tab 键控制次序（1 是第一个）。
				<div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur='alert("失去焦点");' style="border:1px solid #ccc;width:200px;height:200px;outline=0;"></div>
div获得焦点
div正常情况下是无法获得焦点的，所以其b...