js或者angular获取img图片的src（$event.target和this的使用）

来源：互联网发布：js qq邮箱的正则表达式编辑：程序博客网时间：2024/06/16 12:38

<section ng-repeat="brand in brands track by $index"  class="brandElistSe">    <ul class="check_fu">        <li class="brandElist" ng-repeat="brList in brand"><a href="###" ng-click="brandFnc($event)">{{brList}}</a></li>    </ul></section>

$scope.brandFnc = function($event) {    // 通过 $event.target 来获取}

参考：

AngularJs在ng-click函数中如何获取代表当前元素的DOM对象

示例如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery.js"></script>    <script src="../angular.min.js"></script></head><body ng-app="myApp" ng-controller="myCtrl"><div>    <img src="quiz_pic04.png">    <button onclick="getSrc(this)">获取src</button>    <button ng-click="ngGetSrc($event)">获取src</button>    <i ng-click="ngGetSrcAgain($event)">        <img src="photo_pic02.png">    </i></div><script>    //ng-click怎样获取当前元素    var app = angular.module("myApp", []);    app.controller("myCtrl", function ($scope) {        $scope.ngGetSrc = function (ev) {            console.log(ev.target);            //<button ng-click="ngGetSrc($event)">获取src</button>            console.log(ev.target.parentElement);////              <div>//                <img src="quiz_pic04.png">//                <button onclick="getSrc(this)">获取src</button>//                <button ng-click="ngGetSrc($event)">获取src</button>//                <i ng-click="ngGetSrcAgain($event)">//                  <img src="photo_pic02.png">//                </i>//              </div>            console.log(ev.target.parentElement.children[0].src);            //http://localhost:63343/untitled19/app/xiangce/quiz_pic04.png            console.log(ev.target.previousElementSibling);            //<button onclick="getSrc(this)">获取src</button>            console.log(ev.target.nodeName);//BUTTON            console.log(ev.target.outerHTML);//<button ng-click="ngGetSrc($event)">获取src</button>            console.log(ev.target.innerHTML);//获取src        };        $scope.ngGetSrcAgain = function (ev) {            console.log(ev.target);            //注意：此时target不是i节点，而是img节点            //<img src="photo_pic02.png">            console.log(ev.target.parentElement);//            <i ng-click="ngGetSrcAgain($event)">//                <img src="photo_pic02.png">//            </i>            console.log(ev.target.src);            //http://localhost:63343/untitled19/app/xiangce/photo_pic02.png            console.log(ev.target.parentElement.children[0].src);            //http://localhost:63343/untitled19/app/xiangce/photo_pic02.png            console.log("previousElementSibling===" + ev.target.previousElementSibling);            //null            console.log("nodeName===" + ev.target.nodeName);//IMG            console.log("outerHTML===" + ev.target.outerHTML);//<img src="photo_pic02.png">            console.log("innerHTML===" + ev.target.innerHTML);//空        };    });    //js 的 onclick 获取图片的src    var getSrc = function (who) {        var src = $(who).parent().children('img:first-child').attr("src");//方法一        console.log(src);//quiz_pic04.png        var src1 = $(who).parent().find("img")[0].src;//方法二        console.log(src1);//http://localhost:63343/untitled19/app/xiangce/quiz_pic04.png        var pre = $(who).prev().attr("src");//方法三        console.log(pre);//quiz_pic04.png        console.log($(who));//[button, context: button]        console.log($(who).prev());//[img, prevObject: m.fn.init[1], context: button]        console.log($(who).parent());//[div, prevObject: m.fn.init[1], context: button]        console.log($(who).parent()[0].tagName);//DIV        console.log($(who).parent().children('img:first-child')[0].tagName);//IMG    }</script></body></html>

this和event.target的区别：

每次触发DOM事件时会产生一个事件对象（也称event对象），此处的参数e接收事件对象。而事件对象也有很多属性和方法，其中target属性是获取触发事件对象的目标，也就是绑定事件的元素，e.target表示该DOM元素，然后在获取其相应的属性值。

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象

示例：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>e.target</title>    <script src="../jquery.js"></script></head><body><div id="temp"></div><ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">    <li>第一行        <ul>            <li>这是公告标题1</li>            <li>这是公告标题2</li>            <li>这是公告标题3</li>            <li>这是公告标题4</li>        </ul>    </li></ul><script>    $(function () {        $("li").on("click", function (e) {            console.log("e.target==="+e.target);            console.log("this==="+this);            $("#temp").html("clicked: " + e.target.nodeName);            /*不冒泡*/            $(e.target).css("color", "#FF3300");//点击标题4 只有第四个变蓝色            /*冒泡*///            $(this).css("color", "#0000ff");//点击标题4 都变蓝        })    });</script></body></html>

0 0