如何以编程方式触发Focusout事件

Question

如何使用JavaScript而不是jQuery以编程方式触发焦点事件？

例如，在下面的代码中，我们的想法是它应该警告“Hello，world！”因为调用了focusout（）函数（或类似的事件引起的函数）（focusout（）不是JS函数，但这就是想法）。

function helloWorld () {
  alert('Hello, world!');
}

document.getElementsByTagName( 'form' )[0].addEventListener( 'focusout', function( eventObj ) {
  helloWorld();
});

var event = new Event('focusout');
document.getElementsByTagName( 'form' )[0].dispatchEvent(event);       

<form action="" method="post" id="sampleForm">
	<input type="text" id="linkURL" name="linkURL" placeholder="Link URL"><br>
  <input type="submit" name="action" value="Submit">
</form>

Answer 1

您可以使用function helloWorld () { alert('Hello, world!'); } var event = new Event('focusout'); document.getElementsByTagName( 'form' )[0].dispatchEvent(event); document.getElementsByTagName( 'form' )[0].addEventListener( 'focusout', function( eventObj ) { helloWorld(); });构造函数执行此操作。

＆＃13;

＆＃13;

<form action="" method="post" id="sampleForm">
	<input type="text" id="linkURL" name="linkURL" placeholder="Link URL"><br>
  <input type="submit" name="action" value="Submit">
</form>

＆＃13;

angular.module('demoApp', [])

.controller('MainCtrl', function($scope) {
    $scope.json = [{
      "id":1,
      "title":"ASD Headquarters",
      "items":[
         {
            "id":11,
            "title":"San Jose",
            "items":[
               {
                  "id":13,
                  "title":"Jensen Chapman's Team",
                  "items":[
                     {
                        "id":14,
                        "title":"Jimmy John",
                        "leaf":"true"
                     },
                     {
                        "id":15,
                        "title":"Daniel Mills",
                        "leaf":"true"
                     },
                     {
                        "id":16,
                        "title":"Chris Boden"
                     }
                  ]
               }
            ]
         },
         {
            "id":12,
            "title":"Irvine",
            "items":[
               {
                  "id":24,
                  "title":"San Jesus"
               },
               {
                  "id":25,
                  "title":"Fat Albert"
               },
               {
                  "id":26,
                  "title":"Connor McDavid",
                  "leaf":"true"
               }
            ]
         },
         {
            "id":30,
            "title":"San Diego",
            "items":[
               {
                  "id":31,
                  "title":"Duran Duran's Team",
                  "items":[
                     {
                        "id":32,
                        "title":"Amberlynn Pinkerton"
                     },
                     {
                        "id":33,
                        "title":"Tony Mejia"
                     },
                     {
                        "id":34,
                        "title":"Richard Partridge",
                        "leaf":"true"
                     },
                     {
                        "id":35,
                        "title":"Elliot Stabler"
                     }
                  ]
               },
               {
                  "id":40,
                  "title":"Steely Dan's Team",
                  "items":[
                     {
                        "id":36,
                        "title":"Tony Stark"
                     },
                     {
                        "id":37,
                        "title":"Totally Rad"
                     },
                     {
                        "id":38,
                        "title":"Matt Murdock"
                     },
                     {
                        "id":39,
                        "title":"Stan Lee"
                     }
                  ]
               }
            ]
         },
         {
            "id":64,
            "title":"Richard Partridge Stark",
            "leaf":"true"
         }
      ]
   }
];
    $scope.obj = [];
    finddata($scope.json, 'leaf', 'true')
    function finddata(list, key, val) {
        if(!list)
            return;
        list.forEach(item => {
            if(!item)
                return;
            if(item[key] === val){
                $scope.obj.push(item)
                return;
            }else
            finddata(item.items, key, val)
            return;
        })
    }
  
})

＆＃13;

＆＃13;

＆＃13;

Answer 2

我们也可以使用“hideFocus”属性来实现。

例如：

document.getElementById('linkURL').hideFocus;