6回答

• 

  慕无忌4172087

  2020-04-01 03:31:12

  冒泡概念，你可以理解成方法会被子元素继承；所以focusin在.aaron设置之后，它的所有子元素都会继承这个方法；而focus在.aaron1设置后，只有.aaron1本身具有focus方法，所以你点它的额子元素，没有反应

  0 1
• 

  旺仔窝窝头

  2019-12-19 09:23:26

  我的理解：

  我的理解：

  1、首先从定义上看：

  （1）focus():当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。

  （2）focusin()：当元素（或在其内的任意元素）获得焦点时发生 focusin 事件。

  2、focus()：需要在表单元素本身上绑定才有效果，如练习中的

   $(".aaron").focus(function() {//focus()此时是绑定在class=aaron的div上的

          $(this).css('border', '2px solid red');//而div无法聚焦，所以点击div时看不到效果

      })//再点击子元素input时发现也无效果，说明父元素绑定的focus事件不会波及子元素

  若想让input有效果，就应将focus绑定在它本身，修改如下：

   $(".aaron>input").focus(function() {

          $(this).css('border', '2px solid red')

      })

  2、focusin()：在元素包含的元素中产生。还是拿练习中的例子：

  $(".aaron1").focusin(function() {//focusin绑定在class=aaron1的div上

          $(this).find('input').val('冒泡捕获了focusin事件')//此时只有input获焦时才会执行规定的函数

      })//说明，fucusin虽然绑定在父元素aaron1上，但实际是由其子元素input获焦时产生。

  3、总结：focus()需要在表单元素本身上使用才能产生效果，focusin()在任意子元素获得焦点时也会触发。

  
  

  0 1
• 

  湫谷Sama

  2019-10-29 17:55:36

  他这句话表达有误，换言之是“focus()由元素本身产生，focusin()在元素父类的元素产生。”

  就是，我点击input，input发生focus()事件，其父标签div就发生了focusin()

  0 0
• 

  慕粉2133093261

  2019-10-21 10:54:29

  我的理解是focus只在当前绑定的元素有效，而focusIn就是给绑定元素(parentNode)或者绑定元素的子元素(childNode)(能触发这个事件的子元素)，都添加一个focus事件，子元素(childNode)的focus事件触发之后就会返回父元素(parentNode)focusin的执行语句。

  就是绑定focusin的节点，如果本身有focus事件的话，事件触发后返回执行语句。

  如果绑定focusin的节点没有focus事件，而它的子节点会有focus事件。当他的子节点触发完focus事件之后，会返回父节点(绑定focusin事件的那个节点)的执行语句。

  0 0
• 

  慕莱坞2011430

  2019-08-20 23:23:00

  我开始也不明白，后来看懂了，意思是focus只在元素本身起作用，例如$(".aaron")本身是个div，div是无法聚焦的，第一个函数没有被调用。focusin作用在元素包含的元素，即$(".aaron")本身是个div，div中有input框，那么input框被聚焦，那也说明focusin被调用生效

  0 4
• 

  隐子

  2019-08-07 16:36:11

  focusin()在元素包含的元素中产生的意思是指子元素聚焦时才能触发父元素的focusin()方法，例如:
  

  <div id="test">点击触发</div>
  $("#test").focusin(function() {
      alert(113)//此时点击没有弹出效果
      $(this).css('border','2px solid blue') //没有添加上边框
  });
  <div id="test">点击触发：<input type="text" /></div>
  $("input").focus(function() {
      $(this).css('border','2px solid red');
  });
  $("#test").focusin(function() {
      $(this).css('border','2px solid blue');//成功触发事件添加了边框
  });

  0 0