Blur a field without using jQuery

Question

I would like to (unit) test my AngularJS app without resorting to using jQuery, as jQuery will replace jqLite and in the real app jQuery won't be available either. There are real differences between jQuery and jqLite, so having jQuery available to AngularJS in the unit tests is a risk.

Most of my tests work fine without jQuery now, but I need to blur a field, something I can only find out how to do using jQuery. How would I do that in Javascript in a cross browser fashion?

UPDATE: After receiving the answer I solved it using triggerHandler() but not in the directive itself but in the unit test like this:

it("should set the blur state on blur", function() {
    angular.element(elm[0][0]).triggerHandler("blur");
    expect($rootScope.passwordblur).toBe(true);
});

Answer 1

Why not to try directives:

app.directive('blurable', function () {        
        return {
            link: function(scope, element) {               
                element.bind("blur" , function(e){
                    // blur happens
                });
                scope.triggerBlur = function(){
                    element.triggerHandler("blur");
                }
            }
        }
    });

So now in your scope you can run this triggerBlur method for "manual" blur.
Plunk: http://plnkr.co/edit/wPqRqh